У меня есть меню с одним размером шрифта, и при наведении размер шрифта должен быть больше. Из-за этого "прыгают" остальные элементы меню.
body {
background: gray;
}
.main-menu {
padding-left: 0;
}
.main-menu>li {
display: inline-block;
color: #ffffff;
font-weight: 400;
text-transform: uppercase;
margin: 0 7px;
letter-spacing: -0.3px;
}
.main-menu a {
line-height: 20px;
font-size: 0.8125rem;
color: white;
padding: 10px 12px;
font-weight: 500;
text-decoration: none;
}
.main-menu a:hover {
background-color: #62a29e;
border-radius: 6px;
border-bottom: 3px solid #528b86;
font-size: 0.875rem;
padding: 10px 10px;
}
<ul class="main-menu">
<li class="main-menu__item">
<a class="main-menu__link" href="#">Home</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">About</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">Services</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">Portfolio</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">Blog</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">Features</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">Contacts</a>
</li>
</ul>
Как это можно пофиксить?