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

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

从悬停中删除填充，并向普通班级添加边距，请参见示例，文本修饰也不是。希望对您有帮助。.

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