html - 将伪元素放在父元素后面

Question

我正在尝试将图像(之后)放在父图像的后面。我使用盒子作为我想要实现的目标的示例 - 蓝色盒子应该在绿色盒子后面，但无论我使用什么 z-index 它似乎都不起作用。

.box-wrapper {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 1;
}
.box {
  background-color: green;
  position: relative;
  display: block;
  height: 52px;
  width: 72px;
  z-index: 53;
  top: 2%;
  z-index: 2;
}
.box:after {
  content: '';
  //position: relative;
  background-color: blue;
  display: block;
  height: 50px;
  width: 70px;
  z-index: -3;
}

<div class="box-wrapper">
  <div class="box"></div>
</div>

Answer 1

移除box的z-index，为box:after添加position:absolute

.box-wrapper {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 1;
}
.box {
  background-color: green;
  position: relative;
  display: block;
  height: 52px;
  width: 72px;
  top: 2%;
}
.box:before {
  content: '';
  position: absolute;
  background-color: blue;
  height: 50px;
  width: 70px;
  z-index:-2;
}

jsfiddle