Vertical Align Before Pseudo List Item - html

Question

So I made a custom before pseudo line and I'm trying to figure out how to vertically align it center to my list items. How does one do that? I tried absolute positioning but it stacks all of them and places them in the middle rather than them being on each list item.
.menu {
background: #ececec;
width: 200px;
margin-top: 40px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: 0.5s all ease-in-out;
}
.menu li {
padding: 10px 0;
cursor: pointer;
}
.menu ul {
position: relative;
}
.menu li:before {
content: '';
height: 30px;
width: 3px;
background-color: #FE715D;
left: -10px;
position: absolute;
border-radius: 20px;
opacity: 0;
transition: 0.5s all ease-in-out;
}
.menu li:hover:before {
transition: 0.5s all ease-in-out;
opacity: 1;
}
<div class="menu">
<ul>
<li class="lifirst">About Me</li>
<li class="limenu">My Skills<li class="limenu">Portfolio</li>
<li class="limenu">Contact</li>
</ul>
</div>

Answer 1

To prevent the stacking of the pseudo elements, you have to set a position for their corresponding parent.
absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any
—position on MDN
In other words: If you add position: relative; to your <li> elements, every pseudo elements position is depending on its corresponding list item:
.menu {
background: #ececec;
width: 200px;
margin-top: 40px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: 0.5s all ease-in-out;
}
.menu li {
padding: 10px 0;
cursor: pointer;
position: relative;
}
.menu ul {
position: relative;
}
.menu li:before {
content: '';
height: 30px;
width: 3px;
background-color: #FE715D;
left: -40px;
top: 7px;
position: absolute;
border-radius: 20px;
opacity: 0;
transition: 0.5s all ease-in-out;
}
.menu li:hover:before {
transition: 0.5s all ease-in-out;
opacity: 1;
}
<div class="menu">
<ul>
<li class="lifirst">About Me</li>
<li class="limenu">My Skills</l<li class="limenu">Portfolio</li>
<li class="limenu">Contact</li>
</ul>
</div>