-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add .nav-underline
modifier class
#33126
Conversation
Would it make sense to show the underline on hover/focus too? Also, how about using a transition from left to right using Just spitballing here :P |
I'd go with a pseudo-element too, because it'd allow more fine tuning ( Boosted uses a pseudo-element to draw a line (stuck to the My two cents :D |
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? |
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! |
.nav-underline
modifier class
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