Question

Basically, if you look at this you’ll see that I have an element with a transform applied to it that has generated content. The :after element is supposed to appear behind the div but it’s not. No amount of !important-ing is having any effect.

How can I get the pseudo-element to appear behind the div?

I don’t care about IE 8 or below.

Answer 1

Although this is strange, and often unwanted behavior, it is also expected. Essentially, transforming an element creates a new stacking context, which in the case of pseudo-elements, means they can no longer sit behind the element they are based on.

See this article for more information: https://daneden.me/2012/04/22/css-transforms-and-z-index/

Currently, the only way to resolve this would be to create the new stacking context on the parent element (i.e. create a wrapper element and transform that). Here is an example: http://jsfiddle.net/joshnh/GzWnb/

HTML:

<div class="wrapper">
    <div id="box"></div>
</div>

CSS:

.wrapper {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
#box{
    width: 200px; 
    height: 200px;
    left: 100px;
    top: 100px;

    background:blue; 
    position: absolute;
    &:after{
        content: "";
        width: 100px;
        background: orange;
        height: 100px;
        position: absolute;
        left: 120px;
        top: 120px;
        z-index: -2!important;
    }
}