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

Question

In this codepen demo , I able to animate the displaying of an underline on nav elements. But, how do I keep the underline on the current page? The current page is titled 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 element:

<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

When you access the specific page you add the "targeted" navigation item (.nav-item) an class, like "active" or "current-page".

If you done this and added the following CSS Code to your css file, everything should work fine.

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

--

So your navbar on the current page looks something like that:

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