При наведении или добавлении класса, с новым стилем для текста, ширина блока с текстом становится немного шире
Выходит не очень красиво. Как сделать так, что бы текст не перестраивался постоянно?
Пример для наглядности) Проще один раз посмотреть и не распыляться на объяснения.
https://jsfiddle.net/Jimm529/qo8q8gw4/
Ширина текста не может быть фиксированной.
ты хочешь сделать чтобы текст всегда был в одну строчку? (не переносился на вторую при уменьшении ширины?)
Не понял вопроса. Но могу предположить что тебе может помочь либо 1) word-break 2) либо величины в % или flex-ах
Когда увеличивается толщина, при ховере, строка “прыгает”, я хочу этого избежать
а вот так?
без того чтобы задавать ширину li-шкам не обойтись. Не нужно делать ее фиксированной, достаточно сделать в % или flex.
Еще как вариант можно попробовать узнать ширину блоков (li'шек) с той шириной текста, которая будет у текста при наведении. Исходя из ширины текста при наведении, изменить ширину блоков.
Пример: https://jsfiddle.net/gbwLdv8s/.
а что если тебе при ховере делать margin-right на 1px меньше?) https://jsfiddle.net/d77x3equ/
костыль конечно, но проблему решает)
Так делать нельзя однозначно. На других платформах шрифты другого размера. Да и помнить при изменении шрифта о том, что надо править маржины никто не будет.
Если задавать ширину лишкам, то из-за того, что разный текст внутри, могут быть разные отступы между li
Я надеялся, что есть какой-то простой вариант пофиксать это) Наверное лучше не использовать изменения font-weight при hover/active/select и тд
К сожалению, здесь присутствует та же проблема. В этом можно убедиться, поменяв текст в колонках.
Измененный вариант: https://jsfiddle.net/7vqLyptj/.
стиль color в псевдоэлементе a::after излишне, если вы его после хайдите
overflow: hidden;
visibility: hidden;
прикольное решение
title тоже меняй
Да, действительно, недоглядел.
выходит вы резервируете место через title которому ставите bold и просто визуально скрываем. Обратите внимание не удаляя как в случае display:none.
A при наведении сбарсываються стили
overflow: hidden;
visibility: hidden;
и ставится родительский color:#333;
жесть
С этим согласен.
А вот здесь:
не понял :)
сам до конца не догоняю :)