title: Parent div is covering child div's ::after background
body: <p>I'm trying to get the <code>::after</code> element in the code below to show up behind the child div and in front of the Section parent div to create an animated border. I don't understand why having a parent div would 'cover' its child's pseudo-element.</p>
  <p>CodePen: <a href="https://codepen.io/ma-henderson/pen/KKzaxdE?editors=1100" rel="nofollow noreferrer">https://codepen.io/ma-henderson/pen/KKzaxdE?editors=1100</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section-features"&gt;
    &lt;div class="link-box"&gt;
      CONTENT
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>