在當前頁面上為導航元素保留下划線

Question

在這個 codepen 演示中，我能夠動畫顯示導航元素上的下划線。 但是，如何在當前頁面上保留下划線？ 當前頁面的標題是 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 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) 一個類，例如“活動”或“當前頁面”。

如果您完成此操作並將以下 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>