Why pseudo-elements :before and :after appear in front of my DIV element and not behind?
- by Dim13i
I have a DIV element with this given class:
.slideshow { background: white; width: 700px; height: 300px; padding:10px; margin: 0 auto; position: relative; box-shadow: 0px 0px 5px grey, 0px 10px 20px rgba(0,0,0,.1) inset; }
I define those two pseudo-elements (:before and :after):
.slideshow:before, .slideshow:after { content: " "; background: green; width: 50%; height: 50%; position: absolute; z-index: -10; }
My problem is that those two pseudo-elements appear in front of my DIV and not behind. Is there any specific reason for this behaviour?
Here is an example: EXAMPLE
The Javascript part is a bit messy but i'm still working on it.
Also I've noticed that if I delete all the JS part I don't have anymore this problem, but I don't think there is anything in the code that should modify the slideshow DIV
SOLVED: The problem is in the javascript part where I have:
$('.slideshow').css('-webkit-transform', 'rotate(0deg)');
Removing this line solved the problem.
I guess that pseudo-elements :before and :after are not compatible with the property transform.
