css - 伪元素显示在父 div 文本后面但在父 div 前面

Question

我有一个伪元素，它是 div 中的粉红色背景，如下所示:

<div>
  Hello
</div>

div {
  background-color: green;
  display: inline-block;
  padding: 20px;
  position: relative;
}

div::after {
  content: "";
  background-color: pink;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

这里还有一个代码笔来说明我的意思:http://codepen.io/acha5066/pen/oXVPzg我想要粉红色背景在绿色背景之前，但在文本 Hello 之后。我怎样才能做到这一点？

Answer 1

div {
  background-color: green;
  display: inline-block;
  padding: 20px;
  position: relative;
  z-index: 0 /* we etablish a new stacking context */
}

div::after {
  content: "";
  background-color: pink;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1
}

<div>
  Hello
</div>

一篇可以帮助您理解堆叠上下文的好文章:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context