title: z-index IE8 bug on generated content with :after
body: <p>This is a known error in IE8, look at the last bug here:<br>
  <a href="http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html">http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html</a>     </p>
  
  <p>Now, playing a bit with a simple example I found this (test it using IE8):<br>
  <a href="http://jsfiddle.net/AjCPM/">http://jsfiddle.net/AjCPM/</a>    </p>
  
  <pre><code>&lt;div id="target"&gt;
     &lt;div&gt;div&lt;/div&gt;
  &lt;/div&gt;
  
  
  #target {
      position: relative;
      width: 200px;
      height: 200px;
      z-index: 1;
  }
  #target&gt;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;
  }
  </code></pre>
  
  <p>IE8 renders the cyan rectangle (the :after) below the red rectangle, even when it has lower z-index.<br>
  <em>And now the tricky part:</em><br>
  <strong>change the z-index for #target>div from 0 to -1 and voilá ! it's solved !</strong>    </p>
  
  <p>So I solved my problem now using a lot of z-index: -1;<br>
  But I don't feel safe with this.     </p>
  
  <p><strong>Do you know a better solution?</strong>    </p>
  
  <p>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.<br>
  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.<br>
  The problem is that I'm a bit paranoid about the :after pseudoelement now, <strong>do you think is better to avoid it?</strong></p>