html - 为什么伪元素:before and :after appear in front of my DIV element and not behind?

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

我定义了这两个伪元素(:before 和 :after):

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

我的问题是那两个伪元素出现在我的 DIV 前面而不是后面。这种行为是否有任何具体原因？

这是一个例子:EXAMPLE

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

我还注意到，如果我删除所有 JS 部分，我就不会再遇到这个问题，但我认为代码中没有任何内容可以修改 slideshow DIV .

Answer 1

已解决:问题出在我的 javascript 部分:

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

删除这一行解决了我的问题。

我猜想伪元素 :before 和 :after 并不是 100% 兼容属性 transform。