Question

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.

Answer 1

SOLVED: The problem is in the javascript part where I have:

$('.slideshow').css('-webkit-transform', 'rotate(0deg)');

Removing this line solved my problem.

I guess that pseudo-elements :before and :after are not 100% compatible with the property transform.