Подчеркивание css3 переход

Question

Как создать подчеркивание анимации слева направо на hover в CSS3?

Answer 1

Это был очень сложный вопрос.

Единственное решение, которое я могу придумать, чтобы на переход border-bottom на :hover или я на самом деле должен сказать, что я переход border-bottom, width и margin-right сделать border-bottom появляются и в то же время сохранить, в этом случае, ссылки выровнены.

Трудно объяснить, поэтому я сделал быстрый пример, который не идеален и выглядит немного грязным, но по крайней мере он показывает, что я имею в виду. :-)

FIDDLE

HTML

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

CSS

a { 
    text-decoration: none; 
    display: inline-block; 
    border-bottom: 1px solid blue;  
    margin-right: 39px; 
    width: 0px; 
    -webkit-transition: 0.5s ease; 
      transition: 0.5s ease; 
} 

a:hover { 
    -webkit-transition: 0.5s ease; 
      transition: 0.5s ease; 
    border-bottom: 1px solid blue; 
    width: 30px; 
    margin-right: 9px; 
}