在当前页面上保留导航元素的下划线

Question

在this codepen demo中，我能够在导航元素上动态显示下划线。但是，如何在当前页面上保留下划线？当前页面的标题是Support-Tracker。

css：

.navbar .navbar-nav .nav-item .nav-link {
  position: relative;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding-right: 2em;
  padding-left: 2em;
  justify-content: center;
}

.navbar .navbar-nav .nav-item .nav-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar .navbar-nav .nav-item .nav-link:hover::before {
  visibility: visible;
  transform: scaleX(1);
} 

nav元素：

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">EU34</a></li>
        <li class="nav-item"><a class="nav-link">Support-Tracker</a></li>
        <li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>                
    </ul>
</nav>

Answer 1

当您访问特定页面时，您可以将“目标”导航项(.nav- item )添加到一个类中，如"active“或"current- page”。

如果你这样做了，并将下面的CSS代码添加到css文件中，那么一切都应该正常工作。

.navbar .navbar-nav .nav-item.current-page .nav-link::before {
  visibility: visible;
  transform: scaleX(1);
} 

--

因此，您在当前页面上的导航栏如下所示：

<ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link">EU34</a></li>
  <li class="nav-item current-page"><a class="nav-link">Support-Tracker</a></li>
  <li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>             
</ul>