IE-Z index with pseudo-elements before and after

Question

I'm struggling to figure this out. I have an article in which two elements are inserted :before and :after , both of which are absolutely inside this article.

In all browsers except IE8, z-index styling works fine. It should go in this order from the bottom up:

Article Content> Fade Out Image> Icon

I have already tried several different things, the latest of which can be seen here: http://jsfiddle.net/LtYMV/2/

The main run of what I'm trying is as follows:

 article { // styles } article:before { // icon background image used on inserted content } article:after { // background image used on inserted content }​ 

I know there is some kind of trick. I just can't figure it out with any combination of z-index values. Help rate!

Answer 1

IE8 is strange when it comes to pseudo-elements and z-indexes. There is an error that forces children to inherit (without being able to overwrite) z-index parents. You can learn more about IE8 and z-index at quirksmode .

I changed my script a bit to work just like your example in standards-compliant browsers and work fine in IE8, but without changing in IE: http://jsfiddle.net/LtYMV/8/ , although with an icon under text.

I also created a version where he used a different element for the icon (using the class icon "immediately" after each ".post" element). It still has no attenuation for IE8, but the icon is above the text: http://jsfiddle.net/LtYMV/7/ , so this is a slight improvement over the previous one.

Hope this helps!