Меню на CSS — как убрать эффект смещения пунктов?

Question

[Moe Green]

Суть вопроса проста.

Имеется простое горизонтальное меню на CSS.

При hover пункта меню начертание шрифта меняется с font-weight: normal на font-weight: bold.

И меню "шевелится" (а как же иначе?):

codepen.io/gearmobile/pen/myLovx

Можно ли убрать такой эффект смещения пунктов? Как я понял, данный вопрос древний и однозначного решения для него не существует?

Answer 1

[Андрей Б.]

Никак, имитируйте жирность тенью. Это если ширина пунктов меню не известна.

Вспомнилось что как то пробовал такое решение, но как по мне, лучше уж тенью.
Здесь мы резервируем место заранее.

Comments

[Moe Green]

о, да! похоже, это единственное вразумительное "решение" данного вопроса.

[Андрей Б.]

ну а что вы хотели? )) жирный шрифт занимает больше места, логично ведь, это не баг, а нормальное поведение

[Moe Green]

по здравом размышлении тоже такого же мнения. лучшее, что мне удалось достичь - codepen.io/gearmobile/pen/ZYodvg. Жалко, что у text-shadow нет параметра spread, как у box-shadow! Тогда бы таким способом можно было достичь очень четкой границы тени и фактически полностью иммитировать font-weight: bold.

[Moe Green]

а раз есть только blur, то приходиться методом научного тыка подбирать значение blur, чтобы не сильно размытым был эфект.

Answer 2

[Mary Smart]

дописала Ваш код так:
.....
&:first-child
&:hover
font-weight bold
margin-left:-1rem
a.menu__item:last-child:hover
margin-left:-2rem

Comments

[Moe Green]

вы имеете ввиду таким образом? codepen.io/gearmobile/pen/MYGMBN
а вы пробовали сами этот код?
скажу заранее - нечто подобное я уже видел; это решение было отброшено как недейственное.