Vertikales Align vor Pseudo-Listenelement

Question

Also habe ich eine benutzerdefinierte Pseudozeile erstellt und ich versuche herauszufinden, wie ich sie in der Mitte auf meine Listenelemente ausrichten kann. Wie macht man das? Ich habe versucht, absolute Positionierung, aber es stapelt sie alle und platziert sie in der Mitte, anstatt sie auf jedem Listenelement.

.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

die Stapelung der Pseudo-Elemente zu verhindern, haben Sie eine Position für ihre entsprechende Mutter einzustellen.

absolute
das Element aus dem normalen Dokumentenstrom entfernt wird; Für das Element im Seitenlayout wird kein Leerzeichen erstellt. Stattdessen es positioniert ist, relativ zu seinen engsten positioniert Vorfahren falls vorhanden

- position on MDN

Mit anderen Worten: Wenn Sie position: relative; auf Ihre <li> Elemente hinzufügen, wird in Abhängigkeit jeder Pseudo-Elemente Position auf der entsprechenden Liste Artikel:

.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>