擬似リストの前に縦に整列する項目

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

擬似要素の積み重ねを防ぐために、あなたはそれらの対応する親のための位置を設定する必要があります。

絶対
要素は、通常の文書の流れから除去されます。ページレイアウト内のエレメントにスペースが作成されません。あなたは<li>要素にposition: relative;を追加する場合は、すべての擬似要素の位置は、その対応するリストに応じて、次のとおりです。言い換えればposition on MDN

- その代わりに、任意の

場合祖先を配置最も近いに関連して配置されていますアイテム：

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