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 e

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
        
    
   
   #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.