Javascript 设置边框底部长度的动画

我有导航条。在悬停任何一个菜单项时，我希望具有与中完全相同的边框底部动画效果（请参见悬停时左上角的边框或菜单项的动画效果）

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

---

非常感谢您的帮助

边框的长度不能与其周围的元素不同。但是，您可以使用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%;
}

---

它不是边框底部，而是使用css pusedo元素

：before

.navigation li a::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
}

.navigation li a::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}

---

嗯，这就像用开发工具检查web一样简单。他们在该页面中所做的是使用

：before

伪元素在菜单中创建一个元素。悬停时，它们使用CSS变换（缩放）来更改长度

---

这不是JavaScript。它是一个伪元素，其宽度通过父元素悬停时的

transform:scale

转换。感谢您的代码。工作起来很有魅力。只需在小提琴的第21行快速更正一下：“transition:transform:0.2s ease in；”在“transform”之后有一个额外的冒号。我想你可能想知道。

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);
}