Подчеркивание меню при наведении, длина текста, а не длина элемента

Question

Я пытаюсь подчеркнуть подчеркивание пунктов меню при наведении курсора на длину слова. На данный момент, это берет длину элемента. Как мне этого добиться?

Answer 1

Удалите отступы из hover и добавьте поля к обычному классу, см. Пример и текстовое оформление также отсутствует. надеюсь, это поможет ..

.navbar-light .navbar-nav .nav-link {
    padding-bottom: 5px;
    margin:5px;
    font-family: 'Nunito Sans', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height:2rem;
    color: black;
}

.navbar-light .navbar-nav .nav-link:hover {
    font-family: 'Nunito Sans', sans-serif;
    text-transform: uppercase;
    color: black;
    border-bottom: 5px solid #b40900;
}