html -::before和:: after伪元素问题

即使我对::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/