在悬停导航项下划线

Question

I am trying to implement this CSS on a bootstrap nav item. It works, but the actual underline is really far away from the actual words. I would like to underline the actual words with the animation, not underline the border of the navbar.

I do not know why this is or how to fix it. Here is the 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);
}

And the 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

I'm not sure what's going on with all the css you posted—none of it seems to underline anything. I think most people who want to underline a block just use the border-bottom property. The distance can then be set using padding-bottom.

Here's a simplified fiddle: http://jsfiddle.net/markm/7vez27oc/

You can change the distance between the text and the underline in the last css block's padding-bottom

Also, you should use class= for navitem . id= implies uniqueness.

Answer 2

It looks like you are trying to perform an underline on hover for the nav item.

Here is an example of using a CSS transition for underlining a link element.

The example should be easy enough to modify into a bootstrap nav element, if you have a jsFiddle it might be easier to fork it and help you out with the issue.

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;
}