ошибка z-index IE8 на сгенерированном контенте с :after

Это известная ошибка в IE8, посмотрите последнюю ошибку здесь:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

Теперь, немного поиграв с простым примером, я обнаружил следующее (проверьте это с помощью IE8):
http://jsfiddle.net/AjCPM/

   
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 отображает голубой прямоугольник (:after) ниже красного прямоугольника, даже если он имеет меньший z-index.
А теперь самая сложная часть:
измените z-index для #target>div с 0 на -1 и вуаля! проблема решена!

Итак, я решил свою проблему, используя много z-index: -1;
Но я не чувствую себя в безопасности с этим.

Знаете ли вы лучшее решение?

Я использую псевдоэлемент :after, потому что у меня есть список товаров, и я хочу добавить изображение к товару, когда он имеет класс 'sold', например.
Я могу создать на сервере или с помощью JS новый html-элемент для этого, но я думаю, что использование :after является правильным семантическим решением.
Проблема в том, что теперь я немного параноик по поводу псевдоэлемента :after, как вы думаете, лучше его избегать?