CSS：bottom-border-transition - 从中间展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26726436/
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
CSS: bottom-border-transition - expand from middle
提问by Ian
I want to add a bit of transitions to my website. I already have that when someone is in a input-field (so :focus) the border changes color with a transition. I would like that transition to happen from the center to left and right.
我想为我的网站添加一些过渡效果。我已经有了，当有人在输入字段中时（所以 :focus），边框会随着过渡而改变颜色。我希望从中心到左和右的过渡发生。
So the animation is an expanding border to both sides. Is that possible with CSS? If I have to use Jquery or Javascript it's fine.
所以动画是一个向两边扩展的边界。用CSS可以吗？如果我必须使用 Jquery 或 Javascript，那很好。
Thanks in advance, Ian
提前致谢，伊恩
回答by ChamathD
You can do the border transition with CSS. Hope this helps. CODEPEN example
您可以使用 CSS 进行边框过渡。希望这可以帮助。 CODEPEN 示例
HTML :
HTML :
body {
padding: 50px;
}
a, a:hover {
color: #000;
text-decoration: none;
}
li {
display: inline-block;
position: relative;
padding-bottom: 3px;
margin-right: 10px;
}
li:last-child {
margin-right: 0;
}
li:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
li:hover:after {
width: 100%;
background: blue;
}<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>