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

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>

.我只是想用一个 div 和一个 span 创建一个简单的三栏汉堡菜单，出于某种原因，我只能显示一个栏，那就是原始 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>