У меня есть header, у меня в нём есть навигация, при наведении на ссылку я сделал border-bottom: 3px solid #fff;**** но у меня из-за этого начало "подпрыгивать" элемент. Резервировать место я уже пробывал, не помогло.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
header {
display: flex;
justify-content: space-around;
height: 60px;
background-color: blue;
align-items: center;
position: relative;
}
header li {
list-style: none;
}
header ul li a {
display: inline-block;
color: #fff;
text-decoration: none;
padding-bottom: 2px;
}
header nav ul li {
display: block;
float: left;
margin: 5px 20px;
}
header nav ul li a:hover {
border-bottom: 2px solid #fff;
border-radius: 3px;
}
<header>
<nav class="left-container">
<ul class="left-links">
<li><a asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</nav>
<nav class="right-container">
<ul class="left-links">
<li><a asp-controller="Account" asp-action="Login">Login</a></li>
<li><a asp-controller="Account" asp-action="Register">Register</a></li>
</ul>
</nav>
</div>
</header>