时间戳

首页 > 解决方案 > 我正在做汉堡菜单，但我的第三条条纹不会出现

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

问题描述

我正在做 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>

标签： htmlcss

解决方案

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

推荐阅读