Put Pseudo element behind parent

Question

<div></div>
<div></div>
<style>
div {
  width: 90px;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateY(-15px);
  background:#191919;
  box-shadow:0 0 0 13px #E08027;
  position:relative;
}
  div::after{
  content:"";
  position:absolute;
  width:55px;
  height:55px;
  background:#E08027;
  top:-13;
  right:-13;
  z-index:-1;
}
</style>

I am trying to bring the ::after element to back of the parent div. But its not working, why z-index ain't work?

Hello and welcome to Stack Overflow. Just to clear a minor confusion. There is no child div in this example. Neither div have any children, and they are also not a child of another div, at least by your presented example. This is an important distinction, because if I am to take your question literally, then what you are asking is not possible, simply because the `z-index` property will always be relative to the parent. However, since neither of these divs are in fact children of each other, you will be able to implement the functionality you seek. — Martin, Nov 08 '21 at 16:58

score 0 · Answer 1 · answered Nov 08 '21 at 16:45

0

Set position: relative on div::after selector, if you want to z-index works.

answered Nov 08 '21 at 16:45

MarioG8

5,122
4
13
29

Put Pseudo element behind parent

1 Answers1