动画边框长度-底部

Question

我有个小酒吧。在悬停任何一个菜单项时，我想要获得与这里完全相同的边框底部动画效果（查看左上角的边框或菜单项在悬停时是如何动画的）

我试图在stackoverflow和google上找到类似的问题，但没有找到任何有用的东西。

任何帮助都是非常感谢的。

Answer 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

Answer 2

这就像用开发人员工具检查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);
}