Javascript 如何为导航栏创建下划线悬停效果？

我试图创建一个导航栏，当用户将鼠标悬停在其中一个部分上时，它会产生效果。我已经制作了导航栏，但在构建下划线悬停效果时遇到了问题。我希望这样，当用户悬停时，底部会出现一条线，指示他们可以单击它。我怎样才能创造这种效果？这是我正在使用的代码，谢谢

*{ 保证金：0； 填充：0； } 身体{ 最低高度：200vh； 背景颜色：蓝色；； } 标题{ 位置：固定； 排名：0； 左：0； 宽度：100%； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； 过渡：0.6s； 填充：40px 100px； z指数：100000； 字体系列：衬线； } 头。粘性{ 填充：5px100px； 背景：fff； 字体系列：衬线； } 标题。标志{ 位置：相对位置； 字号：700； 颜色：fff； 文字装饰：无； 字号：2em； 文本转换：大写； 字母间距：2px； 过渡：0.6s； 字体系列：衬线； } 标题ul{ 位置：相对位置； 显示器：flex； 证明内容：中心； 对齐项目：居中； 字体系列：衬线； } 标题ulli{ 位置：相对位置； 列表样式：无； 字体系列：衬线； } 标题ulli a{ 位置：相对位置； 利润率：0.15px； 文字装饰：无； 颜色：fff； 字母间距：2px； 字体大小：500px； 过渡：0.6s； 字体系列：衬线； } header.sticky.logo，header.sticky ul li a{ 颜色：000； 字体系列：衬线； } 文件

---

将其添加到样式表中：

header ul li a:hover{
    text-decoration: underline;
}

顺便说一下，不需要为每个元素定义字体-在主体上声明它，所有内容都将继承它。

*{ 保证金：0； 填充：0； } 身体{ 最低高度：200vh； 背景颜色：蓝色；； } 标题{ 位置：固定； 排名：0； 左：0； 宽度：100%； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； 过渡：0.6s； 填充：40px 100px； z指数：100000； 字体系列：衬线； } 头。粘性{ 填充：5px100px； 背景：fff； 字体系列：衬线； } 标题。标志{ 位置：相对位置； 字号：700； 颜色：fff； 文字装饰：无； 字号：2em； 文本转换：大写； 字母间距：2px； 过渡：0.6s； 字体系列：衬线； } 标题ul{ 位置：相对位置； 显示器：flex； 证明内容：中心； 对齐项目：居中； 字体系列：衬线； } 标题ulli{ 位置：相对位置； 列表样式：无； 字体系列：衬线； } 标题ulli a{ 位置：相对位置； 利润率：0.15px； 文字装饰：无； 颜色：fff； 字母间距：2px； 字体大小：500px； 过渡：0.6s； 字体系列：衬线； } /*悬停*/ 标题：悬停{ 文字装饰：下划线； } /*悬停端*/ header.sticky.logo，header.sticky ul li a{ 颜色：000； 字体系列：衬线； } 文件