Javascript 如何使线在悬停状态下滑动<；李>；？

在这里，我将伪类添加到li中，并将其不透明度悬停为1。当我悬停时：在褪色之后，我如何使它看起来像是在直线上移动而没有褪色

ul{
列表样式类型：无；
}
李{
填充：30px；
位置：相对位置；
}
李：之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：3倍；
高度：20px；
背景：红色；
不透明度：0；
过渡：所有700ms立方贝塞尔（0.155,0.930,0.430,0.990）；
}
李：悬停：之后{
不透明度：1；
变换：translatey（30px）；
}

项目
项目
项目
项目

它需要js来满足您的工作需求。您给出的示例使用jquery，但我使用纯js编写了一个版本

该行不是li:：after，而是父级的ul:：after，这样我们就可以得到offsetTop和offsetHeight，并应用相对于父级的样式更改

let root=document.documentElement.style
功能magicline（项目）{
setProperty（'--navlinetop'，`${item.offsetTop}px`）
setProperty（'--navlineheight'，`${item.offsetHeight}px`）
}
函数初始化列表（）{
让listItems=document.querySelectorAll（'li'）
对于（i=0；i

：根目录{
--导航台：0px；
--导航线高度：0px；
}
保险商实验室{
位置：相对位置；
填充：.5em；
排名：0；
宽度：10厘米；
列表样式类型：无；
指针事件：无；
}
李{
指针事件：自动；
光标：指针；
}
悬停：：之后{
位置：绝对位置；
显示：块；
内容：''；
右：-5px；
顶部：var（--navlinetop）；
高度：var（--navlineheight）；
宽度：3倍；
背景：#fa4；
转换：顶部.3s，高度.3s
}

项目
项目
项目
项目

在项目中间：旅行后你是什么意思？看起来这需要js，我会看看我是如何做到的。不太清楚你在找什么here@charlietfl它看起来像是stackoverflow.com/q/51370829/9004424