强调css3过渡

Question

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

Answer 1

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

唯一的解决办法我能想出是过渡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;
}