Подчеркивание на навигационной навигации Пункт

Question

Я пытаюсь реализовать этот CSS для элемента bootstrap nav. Он работает, но фактическое подчеркивание действительно далеки от реальных слов. Я хотел бы подчеркнуть фактические слова с помощью анимации, а не подчеркивать границу навигационной панели.

Я не знаю, почему это и как это исправить. Вот 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 для подчеркивания элемента ссылки.

Пример должен быть достаточно простым, чтобы изменить элемент навигационного элемента, если у вас есть 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; 
}