Html 如何获得EpicGame'；当鼠标悬停在链接上时，导航栏是否会转换？

当你把鼠标悬停在上面，说“新闻”，一条蓝色的下划线就会弹出。据我所见，它实际上是一个背景，高度从0px->5px过渡。但是，我的代码无法复制它

*{
填充：0；
保证金：0；
}
navbar先生{
填充：28px 36px；
背景：黑色；
}
纳瓦尔先生{
列表样式：无；
}
李国宝先生{
填充：0 8px；
身高：100%；
位置：相对位置；
变换：translateZ（0）；
}
.navbar li：：之前{
显示：块；
位置：绝对位置；
底部：0；
左：0；
z指数：-1；
背景：蓝色；
过渡：高度2秒，易于进出；
}
a{
显示：块；
文字装饰：无；
颜色：白色；
}

如果我没说错的话，您已经完成了大部分工作，但是当您使用伪元素时，您应该始终记住，例如必须在其中声明

内容

属性，否则它根本不起作用。然后，为了实现这一点，您只需注意通过将初始值

与
和
高度
放在
之前：
然后将高度元素设置为悬停的实际高度元素即可

所以您的最终代码应该是这样的：
*{
填充：0；
保证金：0；
}
navbar先生{
填充：28px 36px；
背景：黑色；
}
纳瓦尔先生{
列表样式：无；
}
李国宝先生{
填充：0 8px；
身高：100%；
位置：相对位置；
变换：translateZ（0）；
}
.navbar li：：之前{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：0；
z指数：-1；
宽度：50px；
身高：0；
背景：蓝色；
过渡：高度2秒，易于进出；
}
.navbar li:悬停：：之前{
高度：5px；
}
a{
显示：块；
文字装饰：无；
颜色：白色；
}