我正在尝试做一些我认为非常简单的事情,即使我对 ::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>
.我只是想用一个 div
和一个 span
创建一个简单的三栏汉堡菜单,出于某种原因,我只能显示一个栏,那就是原始 span
元素中的栏。根据我对 ::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;
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>
关于html -::before 和::after 伪元素问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47245249/