Как избежать смещения блоков при изменении жирности шрифта при наведении?

Question

[run182]

Есть блок горизонтального меню, при наведении указателя на пункт меню нужно увеличить жирность, но при этом происходит смещение других пунктов, т.к. увеличивается ширина блока. Как этого можно избежать?

<style>
       .menu-bottom a:hover {
              font-weight: 600;
       }
</style>
<nav class="menu-bottom">
	<a href="/">Главная</a>
	<a href="/about/">О Нас</a>
	<a href="/about/delivery/">Оплата и Доставка</a>
	<a href="/news/">Рекламация</a>
	<a href="/about/contacts/">Контакты</a>
</nav>

Comments

[run182]

Николай Петюх: Пожалуйста

Answer 1

[edu30151]

Часто использую text-shadow при наведении... А вообще есть хорошая статья на эту тему.

Answer 2

[IceJOKER]

Поиграться с с padding, изначально задаете паддинг и при наведении убираете его и добавляете жирность.

Это происходит , потому что жирный шрифт занимает больше места, чем обычный, поэтому смещаются

Comments

[run182]

Чем больше букв, тем жирность больше места добавляет, поэтому не вариант