Podkreślenie przejścia css3

Question

Jak utworzyć animację podkreślenia od lewej do prawej na hover w CSS3?

Answer 1

To było naprawdę podchwytliwe pytanie.

Jedynym rozwiązaniem mogę wymyślić jest przejściowym border-bottom na :hover czy powinienem powiedzieć, że rzeczywiście jestem przejście border-bottom, width i margin-right aby border-bottom pojawiają się i jednocześnie zachować, w tym przypadku, wyrównane linki.

Trudno wytłumaczyć, więc zrobiłem szybki przykład, który nie jest doskonały i wygląda trochę niechlujnie, ale przynajmniej pokazuje, o co mi chodzi. :-)

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