Question

我知道那里有关于伪元素的图片＆＃39;自己的关系。

我遇到了一个问题，我想在.nav-box的黑色面前制作.nav-box::after的白色背景色，如同浮动菜单列表。虽然我看过this from previous question，但似乎无法完成上述工作。想检查一下。

代码也在JSBIN上。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我不完全确定你想要实现的目标，但尝试一下从.nav-box中删除z-index。

可以在其后面的:: after / :: before伪元素前面创建div的背景吗？

1 个答案: