Сдвигаются элементы при наведении, что делать?

Question

[stepaniwe]

https://codepen.io/st-iv/pen/GdbNbe
При наведении на span меняется font-weight и другой элемент сдвигается.
Есть способ - задать максимальную ширину элемента span и сдвига не будет. Но требуется чтобы ширина не была фиксированная

Answer 1

[Moskus]

Зафиксировать в стиле ширину элемента. Для этого сменить ему свойство display на inline-block, например.

Comments

[stepaniwe]

в вопросе написал, что требуется НЕфиксированная ширина.

[Moskus]

stepaniwe, не любая задача имеет практичное решение в рамках условий, которые заданы.

Answer 2

[Максим]

или так : https://codepen.io/topicstarter/pen/NMZdYR

Comments

[stepaniwe]

хорошая идея с padding, но всё равно сдвигаются. Я так понимаю там нужно значения правильные подобрать. Но всё же, нет другого способа?

[Максим]

stepaniwe, другой способ это font-weight использовать единый для всего поля ...

[Moskus]

stepaniwe, не выйдет подобрать padding из-за различий рендеринга шрифтов в разых browser-ах и операционных системах.

Answer 3

[SVM]

как вариант
вместо weight использовать shadow + и/или поиграть прозрачностью
span {text-shadow:#fff 1px 1px 2px;color:#000c}
span:hover {text-shadow:#000 1px 1px 2px;color:#000f}
https://codepen.io/sotvm/pen/NMZMNv

Comments

[stepaniwe]

прикольное решение, но всё же видно, что тень(

[SVM]

stepaniwe,
я так понимаю,что вам bold/weigth и нужно,только для того ,чтобы выделить/анимировать элемент,
не вижу особой разницы как это будет реализовано,
за то ,это самый простой вариант - не нужно изобретать велосипедов,
и по моему shadow работает везде (ну как всегда кроме старых ie)