垂直对齐之前伪项目

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>