Html 悬停时锚定动画的CSS问题

我遇到了一个问题，如果锚链接断开到多行上，我的CSS动画将无法工作

我创建了一个片段来展示我的问题

正文{
背景色：#a3d5d3；
}
.最大宽度{
宽度：500px；
}
p{
线高：24px；
}
a{
位置：相对位置；
颜色：蓝色；
文字装饰：无；
}
a:悬停{
颜色：红色；
}
a:以前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：-3px；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
a:悬停：在之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}

你好，
当锚定链接仅在一条线上时，动画工作，但当它拆分到多条线上时，动画不工作。请参见下面段落中的两个链接。

年，她是一名“数字营销主管，波旁情人，纺纱工，跑步者和不情愿的曲棍球妈妈”。她与他人共同创建了领先的数字代理机构Medium One，该机构于2000年被马赛克集团收购

这是最新的小提琴：

正文{
背景色：#a3d5d3；
}
.最大宽度{
宽度：500px；
}
p{
线高：24px；
}
a{
文字装饰：无；
背景图像：线性渐变（黑色、黑色）；
背景位置：底部中心；
背景重复：无重复；
背景尺寸：0%2px；
过渡：背景大小。3s；
}
a:悬停，
a:焦点{
背景尺寸：100%2px；
}

你好，
当锚定链接仅在一条线上时，动画工作，但当它拆分到多条线上时，动画不工作。请参见下面段落中的两个链接。

年，她是一名“数字营销主管，波旁情人，纺纱工，跑步者和不情愿的曲棍球妈妈”。她与他人共同创建了领先的数字代理机构Medium One，该机构于2000年被马赛克集团收购

哦，有人在我面前提供线性梯度解：p。。顺便说一句，您也可以使用

底部中心

作为位置，以获得类似的结果effect@J.DD欢迎：）@MohammadMalek无需添加此类评论，当添加新答案时，她将收到通知。我知道我的兄弟@TemaniAfif