z-index IE8 bug on generated content with :after

Question

This is a known error in IE8, look at the last bug here:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

Now, playing a bit with a simple example I found this (test it using IE8):
http://jsfiddle.net/AjCPM/

<div id="target">    <div>div</div> </div>   #target {     position: relative;     width: 200px;     height: 200px;     z-index: 1; } #target>div{     background: red; width: 200px; height: 200px;       position: relative;     z-index: 0; } #target:before {     top: 0; left: 10%; width: 100%; height: 100%; background: cyan;     content: "after";     position: absolute;     z-index: 10; } 

IE8 renders the cyan rectangle (the :after) below the red rectangle, even when it has lower z-index.
And now the tricky part:
change the z-index for #target>div from 0 to -1 and voilá ! it's solved !

So I solved my problem now using a lot of z-index: -1;
But I don't feel safe with this.

Do you know a better solution?

I'm using the :after pseudoelement because I have a list of products, and I want to add an image to the the item when it has the class 'sold' for example.
I can create in the server or with JS a new html element for that, but I think using :after is the correct semantic solution.
The problem is that I'm a bit paranoid about the :after pseudoelement now, do you think is better to avoid it?

Answer 1

To answer your last question first, as long as you don't need to support any browsers that completely lack support for generated content (http://caniuse.com/#feat=css-gencontent) then you shouldn't need to avoid it. However, since you note that this is a known bug, you should be careful about it.

In this specific example, I can think of three different ways to work around the bug. Whether these are useful to you depends on your actual use case.

1. Use :after instead of :before and remove positioning from the child div: http://jsfiddle.net/AjCPM/24/

   #target {     position: relative;     width: 200px;     height: 200px;     z-index: 1; }  #target>div{     background: red;     width: 200px;     height: 200px; }  #target:after {     content: "after";     position: absolute;     top: 0;     left: 10%;     width: 100%;     height: 100%;     background: cyan;     z-index: 10; } 

2. Add the after to the child div instead of the parent: http://jsfiddle.net/AjCPM/26/

   #target {     position: relative;     width: 200px;     height: 200px;     z-index: 1; }  #target>div{     position: relative;     background: red;     width: 200px;     height: 200px;     z-index: 0; }  #target>div:before{     content: "after";     position: absolute;     top: 0;     left: 10%;     width: 100%;     height: 100%;     background: cyan;     z-index: 10; } 

3. Use a wrapping element (usually because you already have one) to apply the base styling to: http://jsfiddle.net/AjCPM/29/

    <div id="target">      <div id="wrap">          <div>div</div>      </div>  </div>  #target {     position: relative;     width: 200px;     height: 200px;     z-index: 1; }  #wrap>div{     position: relative;     background: red;     width: 200px;     height: 200px;     z-index: 0; }  #wrap>div:before{     content: "after";     position: absolute;     top: 0;     left: 10%;     width: 100%;     height: 100%;     background: cyan;     z-index: 10; } 

Basically, when faced with a difference in interpretation between browsers like this, your best bet is to try to rearrange your approach to find something that works cross-browser.