垂直對齊之前僞項目

Question

所以我做了一個自定義僞線之前，我想弄清楚如何垂直對齊我的列表項。如何做到這一點？我嘗試了絕對定位，但是它將所有這些元素疊加在一起，並將它們放在中間，而不是放在每個列表項上。

.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

爲了防止僞元素的堆疊，你必須設定自己相應的父的位置。

絕對
該元件是從正常的文件流中去除;在頁面佈局中沒有爲元素創建空間。相對於其最接近的定位祖先相反，它被定位如有

- position on MDN

換句話說：如果您添加position: relative;你<li>元素，每一個僞元素位置根據其相應的列表項目：

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