How to make a hover effect on ul li a tag

Question

I'm trying to make a hover effect for my navbar links, in which when they're hovered, a border bottom line animates it's way in. I've tried using this:

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

This partially works, the bottom line appears when hovered (obviously with no animation cause I didn't do that part yet). The thing is that when they're hovered, not only a bottom border appears, but also al the options move, like if the border bottom causes the whole navbar to move each link a little in an opposite direction, like if they are trying to keep distance from each other. How can I fix this issue? I'll leave the HTML code of the navbar and some css code:

HTML:

    <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>

CSS:

* {
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%;
}

Are there any divs that should be added to the navbar? Or what I'm doing makes no sense? I'm still learning so it's possible that I'm making a mess.

Here's a screenshot just in case:

Screenshot of hovered navbar

Thanks SO community!

Answer 1

Is this what you asking? ( you have to view in full screen for good visualization)

 * { 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-links { display: flex; justify-content: space-between; 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%; margin: 10px; }.nav-links li a:hover { border-bottom: 5px solid white; padding-bottom: 3px; }

 <ul class="nav-links"> <li><a href="">HOME</a></li> <li><a href="">PORTFOLIO</a></li> <li><a href="">SUBMIT</a></li> <li><a href="">CONTACT</a></li> <li><a href="">ABOUT</a></li> </ul>

Answer 2

Add

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

Note: when load, li a is showing. When hover, active li:hover a