为什么伪元素:before和:after出现在我的DIV元素前面而不是后面

Question

我有一个div元素和这个给定的类：

.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; }

我定义了这两个伪元素(：在之前和，在

.slideshow:before, .slideshow:after { content: " "; background: green; width: 50%; height: 50%; position: absolute; z-index: -10; }

我的问题是，这两个伪元素出现在我的DIV前面，而不是后面。这种行为有什么具体的原因吗？

下面是一个例子：示例

Javascript部分有点混乱，但我仍在努力

此外，我注意到，如果我删除所有JS部分，我就不再有这个问题了，但我认为代码中没有任何内容可以修改幻灯片DIV.

Answer 1

已解决：问题出现在我拥有的javascript部分：

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

删除这条线解决了我的问题。

我猜测伪元素：在之前和：之后与属性transform不100%兼容。