Css 高亮显示链接a上的动画：悬停：之后

我尝试在链接悬停时重现此效果：

我在左边的菜单上看到了这个：

它是一种从链接中心开始并应用于：after属性的高光动画

我做了这个代码，但它不工作。我不明白我做错了什么

*，
：之后，
：之前{
-webkit框大小：边框框；
框大小：边框框；
}
@-webkit为{
0% {
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧{
0% {
不透明度：1；
}
到{
不透明度：0；
}
}
a{
-webkit转换：所有0.3；
过渡：均为0.3秒；
背景色：透明；
}
A.
答：焦点，
a:悬停{
颜色：继承；
文字装饰：无；
}
a:以后{
内容：“；
位置：绝对位置；
底部：30%；
左：0；
z指数：-1；
宽度：120%；
高度：0.5em；
背景：var（--强调色，#fcf100）；
-webkit变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（0）；
变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（0）；
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：所有0.2秒；
过渡：均为0.2s；
}
a：：悬停：之后{
-webkit变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（1）；
变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（1）；
}

---

以下是我发现的两个问题：

：在
a:：hover:after
中悬停

，只有一个

：

。您应该将

position:relative

添加到链接中，以便效果与链接相关，而不是与页面相关

希望这有帮助

*，
：之后，
：之前{
-webkit框大小：边框框；
框大小：边框框；
}
@-webkit为{
0% {
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧{
0% {
不透明度：1；
}
到{
不透明度：0；
}
}
a{
-webkit转换：所有0.3；
过渡：均为0.3秒；
背景色：透明；
位置：相对位置；
}
A.
答：焦点，
a:悬停{
颜色：继承；
文字装饰：无；
}
a:以后{
内容：“；
位置：绝对位置；
底部：30%；
左：0；
z指数：-1；
宽度：120%；
高度：0.5em；
背景：var（--强调色，#fcf100）；
-webkit变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（0）；
变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（0）；
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：所有0.2秒；
过渡：均为0.2s；
}
a:悬停：之后{
-webkit变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（1）；
变换：平移（-5%，50%）旋转（-2deg）translateZ（0）scaleX（1）；
}

---

@Paulie\u你说得对。多亏了你，我更新了我的问题