Html 为导航栏设置下划线动画

我正在尝试设置导航栏中元素的动画，以便鼠标悬停在导航栏上方时有一个轻松的进出下划线。但是，它不是仅在选定链接下划线，而是在整个ul元素下划线

我怎样才能解决这个问题

a{
文字装饰：无；
颜色：黑色；
}
.nav a：：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：rgb（92149112）；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
.nav a:悬停：：之前{
能见度：可见；
变换：scaleX（1）；
}
ul导航{
字体大小：11px；
列表样式：无；
位置：固定；
显示：块；
填充：0；
保证金：0；
z指数：100；
顶部：0.5em；
右：1.5em；
}
李国荣先生{
显示：内联块；
利润率：7px 15px；
}
.nav a:活动：：之前{
能见度：可见；
转换：scaleX（1）
}

您需要包含一个相对的父元素

li

来封装绝对定位的元素

a

。在那之前，绝对定位a将整个ul作为相对父级

添加代码：

.nav li {
  position: relative;
}

.nav a::before  { 
   bottom: -2px; /* To match the border height */
}

a{
文字装饰：无；
颜色：黑色；
}
李国荣先生{
位置：相对位置；
}
.nav a：：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：-2px；
左：0；
背景色：rgb（92149112）；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
.nav a:悬停：：之前{
能见度：可见；
变换：scaleX（1）；
}
ul导航{
字体大小：11px；
列表样式：无；
位置：固定；
显示：块；
填充：0；
保证金：0；
z指数：100；
顶部：0.5em；
右：1.5em；
}
李国荣先生{
显示：内联块；
利润率：7px 15px；
}
.nav a:活动：：之前{
能见度：可见；
转换：scaleX（1）
}

这里的问题是，伪元素

a:：before

相对于

ul.nav

是绝对定位的，因为它是位于其上方最近的元素。因此，元素从文档流中分离出来，因此

宽度：100%“

使其占据

ul

可用宽度的100%。将

位置：相对
添加到
样式中，如以下示例所示，它将按您的预期工作：


a{
文字装饰：无；
颜色：黑色；
位置：相对位置；
}
.nav a：：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：rgb（92149112）；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
.nav a:悬停：：之前{
能见度：可见；
变换：scaleX（1）；
}
ul导航{
字体大小：11px；
列表样式：无；
位置：固定；
显示：块；
填充：0；
保证金：0；
z指数：100；
顶部：0.5em；
右：1.5em；
}
李国荣先生{
显示：内联块；
利润率：7px 15px；
}
.nav a:活动：：之前{
能见度：可见；
转换：scaleX（1）
}





为什么在问题完全重复时重新打开它？这可能会有多个解决方案改变结构。问题中没有提到定位。无论结构/解决方案是什么，问题都是一样的，即缺少位置：相对位置：绝对位置。OP不会提到位置因为他不知道自己的问题。顺便说一下，你的答案和另一个答案证实了副本。