父div覆盖子div的:: after背景

Question

我试图在下面的代码中获取::after元素，以显示在子div的后面和Section父div的前面，以创建动画边框。我不明白为什么拥有父div会“覆盖”其孩子的伪元素。

CodePen：https://codepen.io/ma-henderson/pen/KKzaxdE?editors=1100

.section-features {
  background: #eee;
}

.link-box {
  margin: 10px auto 0;
  height: 20rem;
  width: 30rem;
  background: black;
  position: relative;
}

.link-box::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  z-index: -1;
  animation: glow 5s linear infinite;
}

<section class="section-features">
  <div class="link-box">
    CONTENT
  </div>
</section>

Answer 1

将position: relative和任何z-index应用于.section-features div。