Javascript 如何在悬停时在现有边界底部上设置边界底部动画，而不使用伪状态

我想在将鼠标悬停在现有边框底部上时设置边框底部的动画，如下所示：

我曾经尝试过使用伪状态

：：before

和

：：after

来实现这一点，而这只会让边框底部从零变为动画。我还尝试在原始元素上包含边框底部，但这不起作用，因为转换发生在

：：after

元素上，并且这两个元素不会像gif示例中那样重叠：

h1{
颜色：#666；
显示：内联块；
保证金：0；
文本转换：大写；
边框底部：3倍纯色浅灰色；
}
h1：之后{
显示：块；
内容：''；
边框底部：实心3px#019fb6；
变换：scaleX（0）；
转换：转换250ms缓进缓出；
}
h1：悬停：之后{
变换：scaleX（1）；
}
h1.左起：之后{
变换原点：0%50%；
}

---

从左侧展开

您需要创建堆叠在彼此顶部的元素，然后将

指针事件：无

添加到上方的元素，这将使其对指针事件“透明”，因此您仍然可以访问其下方的

输入

。使用

~

选择器，我们现在可以编辑上部元素的宽度，同时悬停

输入

，因为它位于

输入

之后的“物理”位置

/*可选*/
输入[类型=文本]{
背景色：#ECEFF1；
边界：0；
}
/**/
*,
：：之后，
：：之前{
框大小：边框框；
}
.包装纸{
显示：内联块；
位置：相对位置；
}
输入[类型=文本]，
.悬停{
高度：2em；
边框底部样式：实心；
边框底宽：1px；
}
输入[类型=文本]{
边框底色：#B0BEC5；
}
输入[类型=文本]：hover~.onHover{
宽度：100%；
}
.悬停{
位置：绝对位置；
排名：0；
左：0；
宽度：0；
边框底色：#000；
指针事件：无；
过渡段：宽400ms，缓进；
}

---

您需要创建堆叠在彼此顶部的元素，然后向上面的元素添加

指针事件：无

，这将使其对指针事件“透明”，因此您仍然可以访问其下方的

输入。使用
~
选择器，我们现在可以编辑上部元素的宽度，同时悬停
输入
，因为它位于
输入
之后的“物理”位置


/*可选*/
输入[类型=文本]{
背景色：#ECEFF1；
边界：0；
}
/**/
*,
：：之后，
：：之前{
框大小：边框框；
}
.包装纸{
显示：内联块；
位置：相对位置；
}
输入[类型=文本]，
.悬停{
高度：2em；
边框底部样式：实心；
边框底宽：1px；
}
输入[类型=文本]{
边框底色：#B0BEC5；
}
输入[类型=文本]：hover~.onHover{
宽度：100%；
}
.悬停{
位置：绝对位置；
排名：0；
左：0；
宽度：0；
边框底色：#000；
指针事件：无；
过渡段：宽400ms，缓进；
}
一个简单的背景动画可以做到：


h1{
颜色：#666；
显示：内联块；
保证金：0；
文本转换：大写；
背景：
线性梯度（#019fb6 0），
线性梯度（浅灰色0）；
背景尺寸：0%3px，100%3px；/*我们将顶部的宽度设为0%*/
背景位置：左下角；
背景重复：无重复；
过渡：0.5s；
}
h1：悬停{
背景尺寸：100%3px；/*100%悬停宽度*/
}
从左展开
一个简单的背景动画可以做到：


h1{
颜色：#666；
显示：内联块；
保证金：0；
文本转换：大写；
背景：
线性梯度（#019fb6 0），
线性梯度（浅灰色0）；
背景尺寸：0%3px，100%3px；/*我们将顶部的宽度设为0%*/
背景位置：左下角；
背景重复：无重复；
过渡：0.5s；
}
h1：悬停{
背景尺寸：100%3px；/*100%悬停宽度*/
}
从左展开