悬停时菜单下划线，文本长度不是元素长度

Question

我试图在鼠标悬停时在菜单项下方添加一个下划线，即单词的长度。现在，它需要元素的长度。我怎样才能做到这一点？

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand active" href="index.html">
        <img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav nav-fill w-100">
        <a class="nav-item nav-link" href="menu.html">La carte</a>
        <a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
        <a class="nav-item nav-link" href="event.html">Événements</a>
        <a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
      </div>
    </div>
  </nav>```


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

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

Answer 1

从悬停中删除填充并向正常添加边距 class 参见示例，文本装饰也是 none。希望对你有帮助..

.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;
}

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand active" href="index.html">
        <img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav justify-content-between w-100">
        <a class="nav-item nav-link" href="menu.html">La carte</a>
        <a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
        <a class="nav-item nav-link" href="event.html">Événements</a>
        <a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
      </div>
    </div>
  </nav>

悬停时菜单下划线，文本长度不是元素长度

Menu underline on hover, text length not element length

css

underline

bootstrap-4