在悬停的链接下创建下划线

Question

我正在寻找一种方法，让一个链接下方的下划线在悬停时进行拍摄，并在鼠标悬停时再次离开。我不确定我是否做得很好解释，所以如果你不明白，请告诉我。我很确定这不能用一个实际的下划线来完成，可能是使用<hr>标签？任何帮助表示赞赏！

Answer 1

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

从这里摘自：Underline css3 transition

Answer 2

这是非常简单的CSS：

a { 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

但是，这仅仅是一个悬停效果，如果你想有一个过渡，然后上面的回答应该工作。