下划线CSS3转换

Question

如何在CSS3中创建下划线动画从hover从左到右？

Answer 1

这是一个非常棘手的问题。

唯一的解决办法我能想出是对:hover过渡border-bottom或我其实应该说，我在过渡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; 
}