Изменение толщины текста

При наведении или добавлении класса, с новым стилем для текста, ширина блока с текстом становится немного шире

Выходит не очень красиво. Как сделать так, что бы текст не перестраивался постоянно?

Пример для наглядности) Проще один раз посмотреть и не распыляться на объяснения.

https://jsfiddle.net/Jimm529/qo8q8gw4/

Ширина текста не может быть фиксированной.

ты хочешь сделать чтобы текст всегда был в одну строчку? (не переносился на вторую при уменьшении ширины?)
Не понял вопроса. Но могу предположить что тебе может помочь либо 1) word-break 2) либо величины в % или flex-ах

Когда увеличивается толщина, при ховере, строка “прыгает”, я хочу этого избежать

а вот так?
без того чтобы задавать ширину li-шкам не обойтись. Не нужно делать ее фиксированной, достаточно сделать в % или flex.

Еще как вариант можно попробовать узнать ширину блоков (li'шек) с той шириной текста, которая будет у текста при наведении. Исходя из ширины текста при наведении, изменить ширину блоков.

Пример: https://jsfiddle.net/gbwLdv8s/.

а что если тебе при ховере делать margin-right на 1px меньше?) https://jsfiddle.net/d77x3equ/
костыль конечно, но проблему решает)

Так делать нельзя однозначно. На других платформах шрифты другого размера. Да и помнить при изменении шрифта о том, что надо править маржины никто не будет.

а так может что то и получится, https://jsfiddle.net/d77x3equ/1/

Если задавать ширину лишкам, то из-за того, что разный текст внутри, могут быть разные отступы между li

Я надеялся, что есть какой-то простой вариант пофиксать это) Наверное лучше не использовать изменения font-weight при hover/active/select и тд

нашел вроде бы не плохое решение: http://jsfiddle.net/85LbG/

1 симпатия

К сожалению, здесь присутствует та же проблема. В этом можно убедиться, поменяв текст в колонках.
Измененный вариант: https://jsfiddle.net/7vqLyptj/.

стиль color в псевдоэлементе a::after излишне, если вы его после хайдите
overflow: hidden;
visibility: hidden;
прикольное решение

title тоже меняй

2 симпатии

Да, действительно, недоглядел.

выходит вы резервируете место через title которому ставите bold и просто визуально скрываем. Обратите внимание не удаляя как в случае display:none.
A при наведении сбарсываються стили
overflow: hidden;
visibility: hidden;
и ставится родительский color:#333;

жесть

1 симпатия

С этим согласен.

А вот здесь:

не понял :)

сам до конца не догоняю :)