悬停时在链接下划线答案

【问题标题】：Make underline shoot under link on hover悬停时在链接下划线
【发布时间】：2013-04-15 22:13:26
【问题描述】：

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

【问题讨论】：

net-kit.com/10-ways-to-animate-your-links

【解决方案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

【讨论】：

谢谢伊恩！我想我应该考虑使用边框...感谢您的所有帮助！

【解决方案2】：

这是非常简单的 CSS：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

但这只是为了悬停效果，如果你想要一个过渡，那么上面的答案应该可以工作。

【讨论】：