如何使用'：after'选择器在此代码中创建边框底部

Question

如何使用伪选择器（：after）为此代码创建边框底部

 <li class="nav-list "> 
    <a href="#" class="nav-link mr-1"> 
       <i class="fas fa-handshake"></i> loyalty Management
    </a> 
</li>

Answer 1

尝试此链接，希望此威尔帮助Codepen

.nav-list {
  position: relative;
  list-style: none;
}
.nav-list a {
  text-decoration: none;
  font-size: 20px;
  font-weight: 300;
  color: #000000;
}
.nav-list a:after {
  content: '';
  position: absolute;
  left: 30px;
  bottom: -5px;
  height: 2%;
  width: 9%;
  border-bottom: 2px solid #641F5E;
}

 <li class="nav-list "> 
    <a href="#" class="nav-link mr-1"> 
       <i class="fas fa-handshake"></i> loyalty Management
    </a> 
</li>

Answer 2

您可以使用以下代码：

li{
position:relative;
}
.nav-list:after{
content: '';
    position: absolute;
    bottom: -4px;
    height: 2px;
    width: 100vh;
    background: black;
    left: 0;
}

<ul>
     <li class="nav-list "> 
        <a href="#" class="nav-link mr-1"> 
           <i class="fas fa-handshake"></i> loyalty Management
        </a> 
    </li>
    </ul>