Html 在CSS中设置动画时排除内容

我试图让我的一部分动画列表项（我动画的顶部边框）。在取得成功的同时，它还为其中的内容设置动画。如何排除它的动画？（附言：对不起，术语错误，我不熟悉编码）

ul{列表样式类型：无；
文本对齐：居中；
保证金：0自动；
填充：0px；
溢出：隐藏；
背景色：#333333；
显示：block；}
li{显示：内联块；
保证金：0px自动；
右边框：1px纯黑；
边框底部：1px纯黑；}
LIA{显示：内联块；
背景色：#333333；
颜色：白色；
文本对齐：居中；
填充：10px；
文字装饰：无；
边界：2px；
垂直对齐：-13px；}
li a:悬停{动画：脉冲1s；动画填充模式：向前；}
@关键帧脉冲{
0%{边框顶部样式：实心；不透明度：0；变换：translateY（5px）}
100%{不透明度：1；边框顶部样式：实心；}

您可以在

li

中放置

span

元素，并绝对定位，而不是在锚定标记上使用边框。这样，它不会影响悬停时的锚定标记。您可以根据需要调整尺寸和颜色

示例：

ul{
列表样式类型：无；
文本对齐：居中；
保证金：0自动；
填充：0px；
溢出：隐藏；
背景色：#333333；
显示：块；
}
李{
显示：内联块；
保证金：0px自动；
右边框：1px纯黑；
边框底部：1px纯黑；
位置：相对位置；
}
李斯潘{
位置：绝对位置；
顶部：0.5px；
背景：红色；
宽度：100%；
高度：2倍；
不透明度：0；
}
李阿{
显示：内联块；
背景色：#333333；
颜色：白色；
文本对齐：居中；
填充：10px；
文字装饰：无；
边界：2px；
垂直对齐：-13px；
}
李：悬停跨度{
动画：脉冲1s；动画填充模式：正向；
}
@关键帧脉冲{
0% {
不透明度：0；
转换：translateY（7px）
}
100% {
不透明度：1；
}

您可以在

li

中放置

span

元素，并绝对定位，而不是在锚定标记上使用边框。这样，它不会影响悬停时的锚定标记。您可以根据需要调整尺寸和颜色

示例：

ul{
列表样式类型：无；
文本对齐：居中；
保证金：0自动；
填充：0px；
溢出：隐藏；
背景色：#333333；
显示：块；
}
李{
显示：内联块；
保证金：0px自动；
右边框：1px纯黑；
边框底部：1px纯黑；
位置：相对位置；
}
李斯潘{
位置：绝对位置；
顶部：0.5px；
背景：红色；
宽度：100%；
高度：2倍；
不透明度：0；
}
李阿{
显示：内联块；
背景色：#333333；
颜色：白色；
文本对齐：居中；
填充：10px；
文字装饰：无；
边界：2px；
垂直对齐：-13px；
}
李：悬停跨度{
动画：脉冲1s；动画填充模式：正向；
}
@关键帧脉冲{
0% {
不透明度：0；
转换：translateY（7px）
}
100% {
不透明度：1；
}

如何使动画在到达li顶部时停止？@dawed1999--抱歉，我忽略了该部分！如何使动画在到达li顶部时停止？@dawed1999--抱歉，我忽略了该部分！