CSS实现div顶部边框效果

一、问题描述

我这边需要实现一个效果，就是点击某个DIV时，此DIV顶部边框显示边框色，表示该DIV是被选中的，用的布局是ul,li。html代码如下：

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

默认显示如下

最终效果如下：

二、解决方法

CSS如下：

.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;
}