CSS 下划线 css3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15489203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Underline css3 transition
提问by ziltoid
How do I create an underline animationfrom left to right on hoverin CSS3?
如何在 CSS3 中从左到右创建下划线动画hover？
回答by Christofer Vilander
This was a really tricky question.
这是一个非常棘手的问题。
The only solution I can come up with is to transition a border-bottomon :hoveror I should actually say that I'm transitioning border-bottom, widthand margin-rightto make the border-bottomappear and at the same time keep, in this case, the links aligned.
唯一的解决办法我能想出是过渡border-bottom的:hover或我其实应该说我过渡border-bottom，width并margin-right让border-bottom出现，并在同一时间保持，在这种情况下，链接对齐。
Hard to explain, so I made a quick example which isn't perfect and looks a bit messy, but at least it shows how I mean. :-)
很难解释，所以我做了一个简单的例子，它并不完美，看起来有点乱，但至少它表明了我的意思。:-)
HTML
HTML
<a href="#">Link</a><a href="#">Link</a>
CSS
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;
}
