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

【问题标题】：Menu underline on hover, text length not element length悬停时的菜单下划线，文本长度而不是元素长度
【发布时间】：2020-04-25 12:14:38
【问题描述】：

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

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

【问题讨论】：

标签： css bootstrap-4 underline

【解决方案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>

【讨论】：

感谢您的回复，我刚刚测试了您发送的代码，但没有达到结果。看到这个代码笔：codepen.io/Guillaume_dev/pen/LYpyEjO
@Tanuki 您正在使用引导程序，因此请删除类 nav-fill 并使用您的自定义类为锚标签提供边距，或者您可以将类 nav-fill 替换为 justify-content-between ...如果不让我知道它会起作用
你是对的，它正在使用 justify-content-between。谢谢。