Add .nav-underline modifier class

[mdo]

Exploring an idea here for adding a .nav-underline variant. Styles are pretty simple, but maybe it's still worth it?

Preview: https://deploy-preview-33126--twbs-bootstrap.netlify.app/docs/5.0/components/navs-tabs/#underline

[XhmikosR]

Would it make sense to show the underline on hover/focus too? Also, how about using a transition from left to right using ::before and transform?

Just spitballing here :P

[ffoodd]

I'd go with a pseudo-element too, because it'd allow more fine tuning (position, background, playing with other shapes than line, etc.). BTW I'd consider this should be a basis and not a modifier since active state should not be conveyed with color only (which is the case as of now).

Boosted uses a pseudo-element to draw a line (stuck to the content-box) in .nav .active, thus applies it to every possible nav.

My two cents :D

[mdo]

Refreshed the design and added hover/focus styles. Not sure about building with a pseudo-element @ffoodd. Feels like that might be a little over-engineered for our default styles?

[ffoodd]

Probably, we'll see whatever issue might come up in the future.

The real ones IMHO regarding borders is altered box sizing, and not sticking to text content if we add horizontal padding; but this does not concern our base styles.

So ship it ☺️

Edit: just saw you dropped padding in that case, while it's not an issue it's different from other navs so we may have people asking for them back; moreover that decreases the hit area for those links so they're a bit harder to click — but also increases spacing between them, so there's less chance to click on the wrong item.

No change to my approval, just needed to mention this!