更改类：使用jquery在选择器之前设置下划线动画

我想设置文本下划线的动画。css没有问题。但是，我想使用另一个文本来触发第一个文本的动画。我已经知道在jquery中不能使用：before，因为它不是DOM的一部分。我见过这两条线：和

但我找不到任何有效的解决方案。代码如下：

html:

---

悬停第一个文本时，它的动画效果良好。当悬停第二个文本时，我想再次设置第一个文本的动画，就像第一个文本悬停一样。有什么办法吗？

您可以向

dos

元素上的

uno

元素

onmouseover

添加一个类

我添加的css是：

h2.uno.active > a:before {
    visibility: visible;
    transform: scaleX(1);
}

以下是工作示例：

$（函数（）{
$（'.dos a'）.on（'mouseover'，function（）{
$（'.uno'）.addClass（'活动'）
}).on（'mouseout'，function（）{
$（'.uno'）.removeClass（'active'））
})
})

@导入url(http://fonts.googleapis.com/css?family=Quando);
*，*：之后，*：之前{
框大小：边框框；
-moz框大小：边框框；
}
*{边距：0；填充：0；边框：0无；位置：相对；轮廓：无；
}
html，正文{
背景#004050；
字体系列：Quando；
字体大小：300；
宽度：100%；
}
氢{
背景：0D757D；
宽度：100%；
最小高度：200px；
线高：200px；
字体大小：3rem；
字体大小：正常；
文本对齐：居中；
颜色：rgba（0,0,0,4）；
保证金：3rem自动0；
}
.dos{背景：#ff5e33；}
h2>a，h3>a{
文字装饰：无；
颜色：rgba（0,0,0,4）；
z指数：1；
}
h2>a：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：3倍；
底部：0；
左：0；
背景：#9CF5A6；
可见性：隐藏；
边界半径：5px；
变换：scaleX（0）；
过渡：.25s线性；
}
h2.uno>a：悬停：在，
h2.uno>a：焦点：之前，
h2.uno.active>a：之前{
能见度：可见；
变换：scaleX（1）；
}

---

太棒了！我没有想到那种方法。在此期间，我开发了一个解决方案，完全没有使用：before。对于那些感兴趣的人，这里是代码：但我会接受你的解决方案，因为它更多的是我搜索的解决方案。谢谢

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
h2.uno > a:hover:before,
h2.uno > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

h2.uno.active > a:before {
    visibility: visible;
    transform: scaleX(1);
}