如何在伪元素中使用 z-index

Question

如何让黄线后面的白线盖住黑线？我试图将 z-index: -1; 添加到 "white line" 但它被所有元素覆盖。

而且我不想更改 .outter 的 z-index。因为还有其他元素，例如输入或按钮。如果我将 z-index 改为 -1，那么 .outter 中的所有元素都不能使用。

下面是我的代码：

li {
  position: relative;
  list-style: none;
}

.outter {
  background-color: black;
}

.inner {
  background-color: yellow;
}

.inner:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4em;
  width: 12em;
  height: 0.2em;
  background: white;
}

<html>

<body>
  <div class="outter">
    <ul>
      <li>
        <div class="inner">test</div>
      </li>
    </ul>
    <button>button</button>
  </div>
</body>

</html>

Answer 1

这样试试

li {
  position: relative;
  list-style: none;
}

.outter {
  background-color: black;
  position: relative;
}

.inner {
  background-color: yellow;
  z-index: 9;
  position: relative;
}

.inner:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4em;
  width: 12em;
  height: 0.2em;
  background: white;
  z-index: -1;
}

<html>

<body>
  <div class="outter">
    <ul>
      <li>
        <div class="inner">test</div>
      </li>
    </ul>
    <button>button</button>
  </div>
</body>

</html>

Answer 2

如果你想要黄线后面的白线，你为什么不这样做呢？

li{
     position: relative;
        list-style: none;
    }
    .outter{
     background-color: black;
    }
    .inner{
     background-color: yellow;
    }
    .inner:before{
     content: '';
        position: absolute;
        top: 50%;
        left: -4em;
        width: 4em;
        height: 0.2em;
        background: white;
    }

<html>
    <body>
    <div class="outter">
    <ul>
    <li>
      <div class="inner">test</div>
    </li>
    </ul>
    </div>
    </body>
 </html>

Answer 3

 li{
     position: relative;
        list-style: none;
    }
    .outter{
     background-color: black;
    }
    .inner{
        position: relative;
     background-color: yellow;
        z-index:1;
    }
    .line{
     content: '';
        position: absolute;
        top: 50%;
        left: -4em;
        width: 12em;
        height: 0.2em;
        background: white;
        z-index: 0;
    }

 <html>
    <body>
    <div class="outter">
    <ul>
    <li>
      <div class="inner">test</div>
      <div class="line"></div>
    </li>
    </ul>
    <button>button</button>
    </div>
    </body>
 </html>

Answer 4

 li{
        position: relative;
        list-style: none;
    }
    .outter{
     background-color: black;
    }
    .inner{
        position: relative;
     background-color: yellow;
        z-index: 0;
    }
    li::before{
     content: '';
        position: absolute;
        top: 50%;
        left: -4em;
        width: 12em;
        height: 0.2em;
        background: white;
    }

 <html>
    <body>
    <div class="outter">
    <ul>
    <li>
      <div class="inner">test</div>
    </li>
    </ul>
    <button>button</button>
    </div>
    </body>
 </html>

如何在伪元素中使用 z-index

How to use z-index with pseudo element

html

css

pseudo-element