html - 悬停导航项上的下划线

Question

我正在尝试在 Bootstrap 导航项上实现此 CSS。它有效，但实际的下划线与实际的文字相去甚远。我想用动画强调实际的单词，而不是导航栏的边框。

我不知道这是为什么，也不知道如何解决。这是 CSS:

li > a {
   position: relative;
   color: #595959;
   text-decoration: none;
}

li > a:hover {
   color: #595959;
}

li > a:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: #595959;
   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;
}

li > a:hover:before {
   visibility: visible;
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}

和 HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li><a href="#">Features</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us </a></li>
    </ul>
</div>

Answer 1

我不确定您发布的所有 CSS 是怎么回事——它们似乎都没有下划线。我认为大多数想要给 block 加下划线的人只是使用 border-bottom 属性。然后可以使用 padding-bottom.

设置距离

这是一个简化的 fiddle : http://jsfiddle.net/markm/7vez27oc/

您可以在最后一个 css block 的 padding-bottom

中更改文本和下划线之间的距离

此外，您应该为 navitem 使用 class=。 id= 表示唯一性。