CSS悬停动画 - 目标列表中的最后一个div

Question

你好 :) 我在这里的引导菜单中添加了一个小下划线动画：http://webserver-meetandengage-com.m11e.net 悬停时，它会从中心绘制下划线。这是我用来实现此目的的 CSS：

/* ---------------------- 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:; 和 left:; 选择器应用一组稍微不同的规则......但我被卡住了，一切我试过似乎没有工作。

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

Answer 1

在弄乱代码时我发现这个

.navbar li:last-of-type a:before {
  left: -6px;
}

编辑

li#menu-item-750 a:before {
    left: -6px;
}

似乎可以解决您的问题，因为它针对最后一个 li 条目上的 before，它应该可以完成这项工作

Answer 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.