CSS hover animation - Target last div in list

时间:2018-01-22 14:56:21

标签: html css wordpress twitter-bootstrap

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-linkwidth:;选择器......但是我被困住了,我所尝试的一切似乎都没有起作用。

任何人都可以了解情况吗?这是正确的还是有更好的方法来解决这个问题?感谢阅读!:)

2 个答案:

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