Parent div is covering child div's ::after background

Question

I'm trying to get the ::after 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.

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>

score 0 · Accepted Answer · answered Aug 24 '20 at 16:06

0

Apply position: relative and any z-index to the .section-features div.

answered Aug 24 '20 at 16:06

Magiczne

1,586
2
15
23

Yup, thank you very much! – mah111 Aug 24 '20 at 17:20
You can consider setting my answer as correct as it will help others know that this is a good solution. – Magiczne Aug 24 '20 at 17:23
Sorry, I just realized that's what I should do. Done :D – mah111 Oct 27 '20 at 14:04

Parent div is covering child div's ::after background

1 Answers1