带下划线的CSS3过渡

带下划线的CSS3过渡

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

唯一的解决办法我能想出是过渡

border-bottom

的

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