我有个小酒吧。在悬停任何一个菜单项时，我想要获得与这里完全相同的边框底部动画效果（查看左上角的边框或菜单项在悬停时是如何动画的）
我试图在stackoverflow和google上找到类似的问题，但没有找到任何有用的东西。
任何帮助都是非常感谢的。
这就像用开发人员工具检查web一样简单。他们在该页面中所做的是使用:before伪元素在菜单中创建一个元素。在悬停时，他们使用CSS转换（缩放）来改变长度。
Jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
边框的长度不能与它所包围的元素不同。然而，您可以只使用CSS实现类似的效果--带有伪元素。下面的内容怎么样：
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JsFiddle
