CSS 在Bootstrap 4中为活动的导航链接添加下划线

在本文中，我们将介绍如何使用CSS为Bootstrap 4中的活动导航链接添加下划线。

阅读更多：CSS 教程

了解Bootstrap 4导航链接

Bootstrap 4是一个流行的CSS框架，提供了许多样式和组件，其中包括导航链接。导航链接通常用于创建网站的导航菜单，并且可以根据活动状态添加不同的样式。默认情况下，Bootstrap 4的导航链接不带下划线。但是，我们可以使用CSS来修改样式，并为活动的导航链接添加下划线。

使用CSS为活动的导航链接添加下划线

为了为活动的导航链接添加下划线，我们可以使用:active伪类选择器和text-decoration属性。text-decoration属性用于添加或删除文本装饰效果，例如下划线。在本示例中，我们将使用下划线作为文本装饰效果。

首先，我们需要为导航链接添加自定义类。在下面的示例中，我们将添加一个名为“underline”的类：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link underline" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link underline" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link underline" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link underline" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

接下来，我们需要使用CSS样式为带有“underline”类的活动导航链接添加下划线。在下面的示例中，我们将使用:active伪类选择器和text-decoration属性的值underline来实现这一目标：

<style>
  .underline:active {
    text-decoration: underline;
  }
</style>

在上面的示例中，我们将为.underline类的活动导航链接添加下划线效果。当用户点击链接时，链接将获得活动状态，并显示下划线。

示例演示

对于上述示例代码，当用户点击导航链接时，链接文本将出现下划线，以示链接处于活动状态。

总结

在本文中，我们介绍了如何使用CSS为Bootstrap 4中的活动导航链接添加下划线。通过使用:active伪类选择器和text-decoration属性，我们可以自定义样式并为活动导航链接添加下划线。通过在导航链接上添加自定义类，并使用适当的CSS样式，我们可以实现这一目标。这对于网站的导航菜单设计非常有用，并且可以提升用户体验。希望本文能帮助你在Bootstrap 4中实现所需的导航链接样式。