Смещается текст при ховере на элемент меню из-за добавления border-left?

Question

[Сергей Грибок]

Добрый день
Начал осваивать CSS и не получается решить проблему
Собственно суть вопроса написана в заголовке.
Ссылка на fiddle - https://jsfiddle.net/p2g30ynu/5/
Буду благодарен за помощь

Answer 1

[Дима Паутов]

Бордеру сначала нада задать прозрачный цвет. Делается это так:

.class {
border-left: 1px solid transparent;
}

.class:hover {
border-left-color: #000;
}

Comments

[Сергей Грибок]

Спасибо.
Уже решил.
Конечно изначально задал не прозрачным, а цветом заливки меню.
Но ваш вариант получше.

Answer 2

[Senbonzakuraa]

Убери border-left и проверь, не будет смещаться)

Comments

[Сергей Грибок]

Я знаю что не будет смещаться без border-left
Но мне хочется с бордером.
Тем не менее спасибо, проблема решена.
Добавил border-left к каждому элементу меню с таким же цветом как и цвет заливки.
И при ховере я просто меняю цвет на свой и ничего не смещается.