CSS realizes div top border effect

1. Problem description

I need to achieve an effect here, that is, when a DIV is clicked, the top border of the DIV will display the border color, indicating that the DIV is selected, and the layout used is ul, li. The html code is as follows:

    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="active nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">
          <i class="fas fa-home"></i>
          首页
        </a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">联系人</a>
      </li>
    </ul>

The default display is as follows

The final effect is as follows:

Two, the solution

The CSS is as follows:

.navbar-nav>.active>a{
    
    
  background: rgba(0,0,0,0.1);
  color: #f6f6f6;
}
.navbar-nav>li {
    
    
  position: relative;
  display: block;
}
.navbar-nav>li.active:after {
    
    
  content: '';
  height: 2px;
  background-color: #f90000;
  top: 0!important;
  bottom: 0;
  width: 100%;
  position: absolute;
  left: 0;
}