Z Index a pseudoelement behind it's parent - css

Question

I'm trying to z index an element behind it's parent but it isn't working.
Here's my pen:
http://codepen.io/Tiger0915/pen/OPXway
and my SCSS:
div {
width: 400px;
height: 250px;
position: relative;
background: grey;
margin: 100px auto;
z-index: 5;
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: 4;
}
}
how do I get my :after to appear behind my parent div?

Answer 1

I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.
So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.
div {
width: 400px;
height: 250px;
position: relative;
margin: 100px auto;
z-index: 5;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: grey;
z-index: -1;
}
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: -2;
}
}
Here's the pen:
http://codepen.io/Tiger0915/pen/XJKBoq