I want my active element to have a vertical line on top of it and I was given a hint to use either :before or :after in CSS to make this line. However, I'm not really familiar with those two tags and I have tried a bit using :after but it doesn't seem to work. Can you give me some advice/suggestions for this? Below is the design example of what it should look like.
.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>