定位伪元素上的 z-index（之后）不起作用

Question

代码如下：

<html>
<head>
  <style>
    .dad {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: greenyellow;
      width: 100px;
      height: 100px;
      z-index: 2;
    }
    .dad::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background: tomato;
      z-index: -1;
    }
  </style>  
</head>
<body>
  <div class="dad">
  </div>
</body>
</html>

我想强迫那个小西红柿方块到绿色方块下面（这样只有西红柿方块的下半部分仍然可见），我怎样才能让它工作？我已经搜索并阅读了发生这种情况的可能原因，并且我尝试了一些修复但没有成功（还有一些问题和答案过于混乱和神秘）。提前致谢。

Answer 1

如果从 .dad 中删除变换和 z-index，红色方块将位于绿色方块下方。

定位伪元素上的 z-index（之后）不起作用

z-index on positioned pseudo element (after) not working

css

z-index

pseudo-element