Меню прыгает при наведении

Question

Я строю меню с помощью начальной загрузки 4 м, но столкнулся с проблемой, которую не могу понять.

header > nav {
    background-color: #fff;
}

.navbar {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.navbar-nav > li > a {
    font-size: 1.4rem;
    color: #504843;
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 700;
    margin-right: 2rem;
}

.navbar-nav > li > a:hover, 
.navbar-nav > li > a:focus {
    background: none;
    font-size: 1.4rem;
    color: #262423;
    border-bottom: .3rem solid #ff5f06;
    letter-spacing: .1rem;
}

.navbar-nav > li:last-child {
    margin-right: -2rem;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
       <div class="container">
        <a class="navbar-brand" href="#">
            <img src="assets/images/logo.png" alt="">
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
        </div>
    </nav>

Я добавил оранжевую линию (border-bottom) при наведении курсора.Когда я наводю курсор мыши на элемент меню, все меню немного подпрыгивает.

Как мне избежать этого прыжка?Спасибо

Answer 1

Вы можете увидеть рабочий пример здесь: jsfiddle.net/n5f2b4qk/

У вас есть «Прыжки» из-за границы снизу: .3rem solid # ff5f06;

Есть 2 подходачтобы избежать этого.

1. установить границу в: после элемента (как в примере)

   .navbar-nav> li> a {font-size: 1.4rem;цвет: # 504843;преобразование текста: верхний регистр;межбуквенный интервал: .1rem;вес шрифта: 700;поле справа: 2рем;положение: относительное;}

   .navbar-nav> li> a: hover, .navbar-nav> li> a: focus {background: none;размер шрифта: 1,4 мм;цвет: # 262423;межбуквенный интервал: .1rem;}

   .navbar-nav> li> a: hover: after, .navbar-nav> li> a: focus: after {content: "";положение: абсолютное;дисплей: блок;слева: 0;справа: 0;низ: 0;высота: .3рем;фон: # ff5f06;}

2. Другой вариант - установить прозрачную рамку для элемента и изменить цвет при наведении.