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

Question

我正在尝试在悬停时实现此边框底部。

到目前为止，我所拥有的是：

这是我到目前为止所拥有的代码：

.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%;
}

任何帮助将不胜感激。 谢谢你。

Answer 1

您可以使用::before和::after伪元素在行的末尾创建和定位这两个点：

更新：现在在<li>元素上使用额外的::before而不是<a>上的text-underline-offset ，因为浏览器似乎以不同的方式计算下划线，导致线条和点未对齐。

 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

您可以混合伪元素和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

通过向左和向右添加径向渐变来扩展伪元素的背景图像：

 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>

背景图像定义开头的内容被绘制在后面的内容之上。