我希望我的活动元素在上面有一条垂直线，我得到了一个提示，在CSS中使用:before或:after来生成这条线.然而，我对这两个标签并不太熟悉，我也try 过使用:after，但它似乎不起作用.你能给我一些建议吗？下面是它应该是什么样子的设计示例.
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
}
.nav-menu .nav-list .nav-item .active ::after {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
top: 0;
} <nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>