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
,它应该可以胜任