可以将 div 的背景放在它的 ::after/::before 伪元素之前吗？

Question

我知道有一张伪元素自身关系图

我遇到了一个问题，我想将 .nav-box 的白色背景颜色放在 .nav-box::after 的黑色背景颜色之前，作为浮动菜单列表。虽然我见过 this from previous question，但似乎无法完成上述工作。想看看是不是这样。

代码也在JSBIN。

body {
  position: relative;
  z-index: 1;
}

.nav-box {
    position: relative;
    z-index: 50; /* no effects */
    top: 0;
    right: 0;
    width: 60vw;
    height: 100vh;
    border: 1px solid red;
    background-color: white;
}

.nav-box::after {
    position: absolute;
    z-index: -1;
    content:"";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

.nav-box::before {
  /* this will be a menu button */
    position: absolute;
    z-index: 10;
    right: 0;
    content: "O";
    color: orange;
    font-size: 40px;
}

<body>
<nav class="nav-box">
  <ul class="menu-box">
    <li><a href="">About</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
</body>

Answer 1

我不完全确定你想要达到的目标但是试试从 .nav-box 中删除 z-index .

可以将 div 的背景放在它的 ::after/::before 伪元素之前吗？

Possible to make div's background in front of its ::after/::before pseudo element's one?

css

background

z-index

css-position

pseudo-element