如何在悬停时在导航中获得此边框底部？

Question

I'm trying to achieve this border bottom on hover.

What I have so far is this:

And here's the code for what I have so far:

.navbar-nav li > a:after {
margin-top: .4rem;
content: '';
display: block;
width: 0;
height: 2px;
background: var(--yellow);
transition: width .3s;
}
.navbar-nav li > a:hover::after {
width: 100%;
}

Any help would be greatly appreciated. Thank you.

Answer 1

You could use the ::before and ::after pseudo elements to create and position those two dots at the end of the lines:

Update: Now using an additional ::before on the <li> element instead of text-underline-offset on the <a> , as Browsers seem to calculate the underline differently, resulting in misalignment of the line and the dots.

 body { background: #333 } nav { background: #eee; padding: 1em 0; } nav ul li { list-style-type: none; display: inline-block; position: relative; box-sizing: content-box; margin: 0 1em; } nav li a { font-weight: bold; font-family: sans-serif; text-transform: uppercase; text-decoration: none; position: relative; display: inline-block; } nav li:hover::before { content: ""; display: block; width: 100%; border-top: solid orange 2px; position: absolute; bottom: -7px; box-sizing: content-box; } nav li a:hover::before, nav li a:hover::after { content: ""; display: block; width: 4px; height: 4px; background: orange; border-radius: 100%; position: absolute; bottom: -8px; } nav li a:hover:before { left: -3px; } nav li a:hover:after { right: -3px; }

 <nav> <ul> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Ipsum</a> </li> <li> <a href="#">Dolor</a> </li> </ul> </nav>

Answer 2

You can mix-up pseudo element and radial-gradient

 body { background: #333 } nav { background: #eee; padding: 1em 0; } nav ul li { list-style-type: none; display: inline-block; padding: 0 1em; } nav li a { font-weight: bold; font-family: sans-serif; text-transform: uppercase; text-decoration: none; position: relative; } nav li a:before { content: ""; width: 100%; height: 4px; background: radial-gradient(circle at 4%, red, red 4%, transparent 4%, transparent 75%), radial-gradient(circle at 96%, red, red 4%, transparent 4%, transparent 75%); position: absolute; bottom: -8px; opacity: 0; transition: opacity 300ms; } nav li a:after { content: ""; left: 0; width: 100%; height: 2px; background: red; position: absolute; bottom: -7px; opacity: 0; transition: opacity 300ms; } nav li a:hover:before, nav li a:hover:after { opacity: 1; }

 <nav> <ul> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Ipsum</a> </li> <li> <a href="#">Dolor</a> </li> </ul> </nav>

Answer 3

Extend the background image of the pseudo element by adding a radial gradient to the left and to the right:

 body { --yellow: gold; /* set to gold just so easier to see in the demo */ } .navbar-nav ul{ list-style: none; } .navbar-nav li > a { display: inline-block; width: auto; } .navbar-nav li > a:after { margin-top: .4rem; content: ''; display: block; width: 0; height: 4px; background-image: radial-gradient(circle at left, var(--yellow) 0%, var(--yellow) 4px, transparent 4px), radial-gradient(circle at right, var(--yellow) 0%, var(--yellow) 4px, transparent 4px), linear-gradient(transparent 1px, var(--yellow) 1px, var(--yellow) 3px, transparent 3px, transparent); background-repeat: no-repeat no-repeat; transition: width .3s; } .navbar-nav li > a:hover::after { display: inline-block; width: 100%; }

 <div class="navbar-nav"> <ul> <li><a hre="">Home</a></li> </ul> </div>

The things that are at the beginning of the background image definition get drawn on top of the things that come after.