Javascript CSS菜单悬停下划线动画

我尝试在菜单项上悬停时创建下划线动画（基于此）。由于某些原因，当鼠标悬停时，我的所有菜单项都有下划线，而不是一个。我只希望悬停的菜单项加下划线，而不是所有内容

这是我的密码：

html{
背景色：#131313；
}
.页{
位置：绝对位置；
保证金：0；
填充：0；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字号：17px；
列表样式：无；
}
李先生{
浮动：左；
显示：内联块；
填充：15px；
}
.a页{
颜色：白色；
文字装饰：无；
}
.第a页：之后{
内容：''；
位置：绝对位置；
宽度：0；
高度：3倍；
显示：块；
边缘顶部：5px；
右：0；
背景：#fff；
过渡：宽度。4s轻松；
}
.第a页：悬停：之后{
宽度：100%；
左：0；
背景：#fff；
}

从

中删除
位置：绝对
。第a页：在

之后。具有定位的元素不在正常文档流中。在您的代码片段中，您的100%宽度将不是

a

的100%，而是距离最近的相对/绝对位置的父项的100%（在您的情况下，主体由defaul；ul确定）

或者，您可以将

位置：relative

设置为li，这样

：after

元素将成为li的基础元素

html{
背景色：#131313；
}
.页{
位置：绝对位置；
保证金：0；
填充：0；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字号：17px；
列表样式：无；
}
李先生{
浮动：左；
显示：内联块；
填充：15px；
职位：相对
}
.a页{
颜色：白色；
文字装饰：无；
}
.第a页：之后{
内容：''；
位置：绝对位置；
宽度：0；
高度：3倍；
显示：块；
边缘顶部：5px；
右：0；
背景：#fff；
过渡：宽度。4s轻松；
}
.第a页：悬停：之后{
宽度：100%；
左：0；
背景：#fff；
}

从

中删除
位置：绝对
。a页：在
之后谢谢！！成功了！你能解释一下为什么会有不同吗？