Hello :) I have added a little underline animation to my bootstrap menu here: http://webserver-meetandengage-com.m11e.net所以在悬停时，它会从中心绘制下划线。以下是我用来实现这一目标的CSS：
y正如您将看到的，列表中的最后一项，控制面板，我在使用：/* ---------------------- Animated hover --------------------- */
.navbar-light .navbar-nav .nav-link {
position: relative;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FEB700;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-light .navbar-nav .nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ----------------------------------- */
选择器之前添加了一个挂锁图标，如下所示：
li:last-of-type:before由于此图标，下划线动画不是按钮的中心，并且在右侧显示更多内容。
我可以通过调整.navbar li:last-of-type:before {
font-family: FontAwesome;
content: "\F023";
float: left;
margin-top: 8px;
}
.navbar li:nth-last-child(2) {
margin-right: 15px;
}
和width:;来解决此问题，但这当然会影响菜单中的所有其他下划线。
我试图将两者结合起来，我想我可以定位最后一个left:;项目，并将一组略有不同的规则应用于.nav-link和width:;选择器......但是我被困住了，我所尝试的一切似乎都没有起作用。
任何人都可以了解情况吗？这是正确的还是有更好的方法来解决这个问题？感谢阅读！:)
答案 0 :(得分：2)
您可以在HTML中添加Font Awesome图标而不使用CSS魔术：
<i class="fa fa-fw fa-lock"></i>
有些人使用<em>标记或其他内容，我更喜欢<i> ...
您可以使用CSS前缀fa和图标名称将Font Awesome图标放置在任何位置。 Font Awesome旨在与内联元素一起使用（为简洁起见，我们喜欢
<i>标记，但使用<span>在语义上更正确）。 See Font Awesome documentation
答案 1 :(得分：1)
在搞乱代码时我发现了这个
.navbar li:last-of-type a:before {
left: -6px;
}
修改
li#menu-item-750 a:before {
left: -6px;
}
为了解决您的问题，因为它定位了最后before条目中的li，它应该可以胜任