In my navigation bar, I implemented flex with flex-direction column to stack the child elements vertically. However, I am facing an issue where all the child elements have the same width. I want each child element to have its own specific width so that I can create a moving underline effect using span. Does anyone have any suggestions on how to avoid giving all child elements the same width and instead allow them to have their individual widths?
body > aside {
width: 50%;
display: flex;
flex-direction: column;
}
body > aside > section {
height: calc(100vh - 50px);
position: sticky;
top: 50px;
display: flex;
align-items: center;
justify-content: center;
}
body > aside > section > nav {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
body > aside > section > nav > div {
display: flex;
flex-direction: column;
}
body > aside > section > nav > div > a {
color: grey;
font-weight: 900;
text-decoration: none;
font-size: 25px;
transition: 0.3s;
font-variant: small-caps;
}
body > aside > section > nav > div > a:hover {
color: var(--4nd-main-color);
text-decoration: none;
font-size: 25px;
}
body>aside>section>nav>div>span {
background-color: var(--4nd-main-color);
width: 00%;
margin-top: 1.5px;
border-radius: 3.5px;
transition: 0.5s;
height: 8px;
}<body>
<aside>
<section>
<nav>
<div>
<a class="h" href="#1">Home</a>
<span id="underline1"></span>
</div>
<div>
<a id="e" href="#2">Employees</a>
<span id="underline2"></span>
</div>
<div>
<a id="cu" href="#3">Contact us</a>
<span id="underline3"></span>
</div>
<div>
<a id="au" href="#4">About us</a>
<span id="underline4"></span>
</div>
</nav>
</section>
</aside>
</body>