悬停导航项下划线

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的情况如何 - 似乎没有任何内容强调任何内容。我想大多数想要强调块的人只使用border-bottom属性。然后可以使用padding-bottom.

设置距离

这是一个简化的小提琴： http://jsfiddle.net/markm/7vez27oc/

您可以更改最后一个css块padding-bottom

中文本与下划线之间的距离

另外，您应该class=使用navitem。 id=意味着唯一性。

Answer 2

看起来您正尝试在导航项的悬停时执行下划线。

Here是使用CSS转换为下划线链接元素的示例。

该示例应该很容易修改为bootstrap nav元素，如果你有一个jsFiddle，它可能更容易分叉并帮助你解决问题。

HTML

<a href="#">Link Hover</a>

CSS

a {
  font-size: 1.5em;
  color: #2c6700;
  text-decoration: none;
  -ms-transition:all .5s ease-in;
  -webkit-transition:all .5s ease-in;
  transition:all .5s ease-in;
}
a:hover { 
    color:#c3c3e5; 
    border-bottom: 1.2px solid #c3c3e5;
}