Html 如何在标签上产生悬停效果

我正在尝试为导航栏链接制作一个悬停效果，当它们悬停时，一条边界底线会使其进入动画。我试过用这个：

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

这部分工作，底线出现时悬停（显然没有动画，因为我还没有做那部分）。问题是，当它们悬停时，不仅会出现底部边框，而且所有选项都会移动，例如，如果边框底部导致整个导航栏将每个链接向相反方向移动一点，就像它们试图彼此保持距离一样。如何解决此问题？我将留下导航栏的HTML代码和一些css代码：

HTML:

是否有任何应添加到导航栏的div？或者我所做的毫无意义？我还在学习，所以我可能把事情搞得一团糟

这里有一个截图以防万一：

非常感谢社区

这就是你要问的吗？（为了获得良好的可视化效果，您必须全屏查看）

*{
边际：0px；
填充：0px；
框大小：边框框；
}
身体{
背景色：#900c3f；
}
img{
宽度：130px；
边缘顶部：20px；
左边距：20px；
边缘底部：20px；
}
.导航链接{
显示器：flex；
证明内容：之间的空间；
宽度：80%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
文字装饰：无；
字体系列：Poppins；
颜色：#F5；
字母间距：3px；
字体大小：粗体；
字体大小：130%；
利润率：10px；
}
.导航链接李a：悬停{
边框底部：5px纯白；
垫底：3件；
}

这就是你要问的吗？（为了获得良好的可视化效果，您必须全屏查看）

*{
边际：0px；
填充：0px；
框大小：边框框；
}
身体{
背景色：#900c3f；
}
img{
宽度：130px；
边缘顶部：20px；
左边距：20px；
边缘底部：20px；
}
.导航链接{
显示器：flex；
证明内容：之间的空间；
宽度：80%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
文字装饰：无；
字体系列：Poppins；
颜色：#F5；
字母间距：3px；
字体大小：粗体；
字体大小：130%；
利润率：10px；
}
.导航链接李a：悬停{
边框底部：5px纯白；
垫底：3件；
}

添加

注：加载时，显示li a。悬停时，活动li：悬停a

添加

---

注：加载时，显示li a。当鼠标悬停时，活动的li:hover a

看起来像是你的

anchor

标记不正确。怎么回事？错误在哪里？有两个结束锚标记，但是这不是导航条移动的问题。是的，我没有注意到，它被删除了，但我仍然无法识别导航条问题看起来你的

锚
标记不正确。怎么回事？错误在哪里？有两个结束锚标签，但是这不是导航条移动的问题。是的，我没有注意到，嗯，它被删除了，但我仍然不能准确地识别我的导航栏问题，但是有没有办法使它在5px下面加下划线，并用一些选项填充，这样它们就不会接触到？是的，删除悬停代码并添加此
边框底部：5px纯白请检查现在我已经更新了我的代码。如果你问的是2个
锚定
标记之间的空间，那么你编写的代码将负责你周围的空间，你不必担心。我还没有足够的声誉来投票。。。对不起，没问题！快乐的编码。确实如此，但是有没有一种方法可以让它在5px下加下划线，并在选项上加上一点填充物，这样它们就不会碰到？是的，删除悬停代码，然后添加这个
边框底部：5px纯白请检查现在我已经更新了我的代码。如果你问的是2个
锚定
标记之间的空间，那么你编写的代码将负责你周围的空间，你不必担心。我还没有足够的声誉来投票。。。对不起，没问题！快乐编码。
    <ul class="nav-links">
    <li><a href="">HOME</a></a></li>
    <li><a href="">PORTFOLIO</a></a></li>
    <li><a href="">SUBMIT</a></a></li>
    <li><a href="">CONTACT</a></a></li>
    <li><a href="">ABOUT</a></a></li>
    </ul>

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #900c3f;
}

img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}

.nav-links li {
list-style: none;
}

.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 130%;
}

li a {box-sizing: border-box;width: 100%;padding: 5px;border-top: 0px;border-bottom:0px;border-left: 0px;border-right: 0px;}