CSS скользящий underline

Question

У меня есть горизонтальное меню на моем сайте. Я хочу, чтобы ссылки меню гладко подчеркивались. HTML

<nav id="nav_container"> 
    <ul id="nav"> 
     <li class="nav_item"><a href="#">Sportovci</a></li> 
     <li class="nav_item"><a href="#">Specialisté</a></li> 
     <li class="nav_item"><a href="#">Kluby</a></li> 
     <li class="nav_item"><a href="#">Obchody</a></li> 
     <li class="nav_item"><a href="#">Ligy</a></li> 
     <li class="nav_item"><a href="#">Články</a></li> 
     <li class="nav_item"><a href="#">Kontakt</a></li> 
    </ul> 
</nav>   

CSS

.nav_item { 
    display: inline-block; 
    margin: 0 10px; 
} 

.nav_item:after { 
    content: ''; 
    display: block; 
    height: 1px; 
    width: 0; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 

.nav_item:hover:after { 
    width: 100%; 
    background: #236fe8; 
} 

С помощью этого кода ссылка подчеркнет слева направо на парении, но когда я выхожу с мышью не плавно возвращаться. Я думаю, что это будет какой-то JavaScript (jQuery), но не знаю, как это сделать. Я также хочу, чтобы нажатая (активная) ссылка осталась подчеркнутой. Как это сделать?

Буду благодарен за каждый ответ.

Answer 1

Как об ориентации якоря вместо .nav_item с так:

a:after { 
    content: ''; 
    display: block; 
    height: 1px; 
    width: 0; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 

a:hover:after { 
    width: 100%; 
    background: #236fe8; 
} 

Здесь ваш updated jsFiddle.

Answer 2

заменить код с этим одним

.nav_item:after { 
    content: ''; 
    display: block; 
    height: 1px; 
    width: 0;`enter code here` 
    background: transparent; 
    transition: width .5s ease, background-color .9s ease; 
} 

перейти по следующей ссылке для получения дополнительной помощи, я надеюсь, что это будет решить вашу проблему http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp