css - 下划线 css3 过渡

Question

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

Answer 1

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

我能想出的唯一解决方案是转换 a border-bottomon:hover或者我实际上应该说我正在转换border-bottom，width并margin-right使其border-bottom出现并同时保持，在这种情况下，链接对齐。

很难解释，所以我做了一个简单的例子，它并不完美，看起来有点乱，但至少它说明了我的意思。:-)

小提琴

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