::擬似要素は

Question

を発行した後、私は、私も::beforeと::after

.menu-icon { 
 
    display: flex; 
 
    width: 40px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
    justify-content: center; 
 
} 
 
.menu-icon span { 
 
    background-color: black; 
 
    width: 35px; 
 
    height: 5px; 
 
    margin-top: 6px; 
 
} 
 
.menu-icon span::before { 
 
    content: ""; 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: black; 
 
} 
 
.menu-icon span::after { 
 
    content: ""; 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: black; 
 
}

<div class="menu-icon"> 
 
     <span></span> 
 
</div>

の私ザッ理解した上で、本当に簡単だと思う何かをやろうとしている前と::。私はちょうど1つのdivと1つのspanとの単純な3つのバーのハンバーガーメニューを作成しようとしています。何らかの理由で、私は表示する1つのバーを得ることができ、それは元のspan要素にあるバーです。 ::beforeと::afterの私の理解で、それらのバーを作ることができるはずです。私が間違っている？そして私がそうでない場合、私のコードのどの部分がバーを疑似要素に表示していないのですか？

Answer 1

前と後のコンテンツを空白にするには、表示と余白のようないくつかの追加プロパティを設定する必要があります。

.menu-icon { 
 
    display: flex; 
 
    width: 40px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
    justify-content: center; 
 
} 
 
.menu-icon span { 
 
    background-color: black; 
 
    width: 35px; 
 
    height: 5px; 
 
    margin-top: 6px; 
 
} 
 
.menu-icon span::before { 
 
    content: ""; 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: black; 
 
    display:block; 
 
    margin: 10px 0; 
 
} 
 
.menu-icon span::after { 
 
    content: ""; 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: black; display:block; 
 
    margin: -5px 0; 
 
}

<div class="menu-icon"> 
 
     <span></span> 
 
</div>

Answer 2

あなたの現在のアプローチに代わるものとして、あなたも2が一番下に二つのバーを作成box-shadowプロパティを使用することができます。

私は、元のものよりも2つの影を、9pxの間隔で追加しました。

.menu-icon { 
 
    display: flex; 
 
    width: 40px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
    justify-content: center; 
 
} 
 
.menu-icon span { 
 
    background-color: black; 
 
    width: 35px; 
 
    height: 5px; 
 
    margin-top: 6px; 
 
    box-shadow: 0 9px currentColor, 0 18px currentColor; 
 
}

<div class="menu-icon"> 
 
    <span></span> 
 
</div>