Как сделать что-бы при наведении кода не прыгал?

Question

[Олег Ким]

Как сделать что-бы при наведении кода не прыгал, есть вот такой код?
.navbar-nav {
display: inline-block;
float:none;
vertical-align: top;

li {
display: inline-block;
padding: 0 15px 0 15px;


text-align: center;
a {
position: relative;
font-size: 16px;
padding:0 0 10px 0;

border-bottom:5px solid transparent;
color: #fff;
&:hover {
text-decoration: none;

font-family: 'MuseoSansCyrl-900';
border-color:#e3a610;
}
}
}
}

Comments

[Модератор]

3.8. Использовать для демонстрации фрагментов кода только специальный тег < code>

[Ankhena]

Компенсировать на выбор
- высотой
- отступами
- бордерами
Если меняется шрифт, значит единицы измерения компенсации должны зависеть от шрифта (rem, em, ch ...)

p.s. Не делайте тройную вложенность селекторов. Вряд ли в меню у вас есть ссылки НЕ лежащие в li.

Answer 1

[coderxx]

если я правильно понял вопрос, то решение будет типа такого:

border-bottom:5px solid black;
text-decoration: none;
color: #fff;
&:hover {
border-bottom:5px solid transparent;

в следующий раз в конструктор заливайте, будет понятнее и нагляднее

Comments

[Олег Ким]

я шрифт увеличиваю а не border?

[coderxx]

Олег Ким, тогда абсолютное позиционирование по отношению к шрифту