html - 我正在制作汉堡菜单，但我的第三条条纹不会出现

Question

我正在做 css，但由于某种原因我的第三个条纹不会出现。

我一直在寻找拼写错误和错误，但我一直回到同样的问题，即使 firefox 没有给我一个 html 错误(而且我还没有完成切换，这只是样式)

/*.hamburger-menu{
    display: none;
}*/
#menu_toggle{
    opacity: 0;
}
.menu_btn{
    display: flex;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
}
.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after{
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #d11;
}
.menu_btn > span::before{
    content: '';
    top: -8px;
}
.menu_btn > span::after{
    top:8px;
}
.menu_box{
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    text-align: center;
    background-color: #eee;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
}

<div class="hamburger-menu">
<input type="checkbox" id="menu_toggle">
<label class="menu_btn" for="menu_toggle">
    <span></span>
</label>
<ul class="menu_box">
    <li class="menu_item" href="#">Home</li>
    <li class="menu_item" href="#">Our Products</li>
    <li class="menu_item" href="#">More About Us</li>
    <li class="menu_item" href="#">How To Use</li>
    <li class="menu_item" href="#">Become An Affiliate</li>
</ul>
</div>

Answer 1

你的 .menu_btn > span::after 没有内容。这就是它没有出现的原因。

/*.hamburger-menu{
    display: none;
}*/
#menu_toggle{
    opacity: 0;
}
.menu_btn{
    display: flex;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
}
.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after{
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #d11;
}
.menu_btn > span::before, .menu_btn > span::after{
    content: '';
    top: -8px;
}
.menu_btn > span::after{
    top:8px;
}
.menu_box{
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    text-align: center;
    background-color: #eee;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
}

<div class="hamburger-menu">
<input type="checkbox" id="menu_toggle">
<label class="menu_btn" for="menu_toggle">
    <span></span>
</label>
<ul class="menu_box">
    <li class="menu_item" href="#">Home</li>
    <li class="menu_item" href="#">Our Products</li>
    <li class="menu_item" href="#">More About Us</li>
    <li class="menu_item" href="#">How To Use</li>
    <li class="menu_item" href="#">Become An Affiliate</li>
</ul>
</div>