Как сделать чтобы при фокусе/ховере элементы навигации не двигались с изменением font-weight?

Question

[tostershmoster]

Хедер

При фокусе и на ховере сдвигаются элементы навигации (header__nav-links)

Пробовал добавить display: inline-block;
для классов:
header__nav-links,
header__nav-li,
header__nav-link

Не помогло

Comments

[Антон Литвиненко]

хаком с text-shadow

[Ankhena]

На css-tricks была статья как это делать с помощью псевдо, загуглите.

Или нарисовать тенями псевдожирность. Не всегда это красиво выходит.

[RAX7]

https://css-tricks.com/bold-on-hover-without-the-l...

Answer 1

[archelon]

Эффективных способов нет.
Вижу, вы экспериментировали с letter-spacing. Еще можно попробовать «поиграться» с отступами.
Смещения не будет, если использовать моноширинный шрифт или применить position:absolute.
Но это вряд ли можно считать решением вопроса.

Comments

[tostershmoster]

Как оказалось letter-spacing в данном случае использовать не нужно. Моноширинный шрифт тоже не вариант, нужен этот. Поиграться с отступами? Всмысле вместо justify-content: space-between; для .header__nav-links делать отступы для .header__nav-li и на фокусе/ховере менять их? Про position: absolute; не совсем понятно. Как это тут использовать?

[archelon]

tostershmoster, это все малоэффективные костыли.
выше в комментариях дали ссылку на css-tricks с очень интересным способом.