Z-индекс IE8 до и после селекторов CSS

Это очень расстраивает ....

http://jsfiddle.net/RRnm8/

    
Text to appear in front

#target {
    position: relative;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "content from before, should be behind #target";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
    z-index: -1;
}

хорошо работает во всех браузерах, кроме IE8 ...

он должен отображаться как это:

Но в IE8 вы получите следующее: '(

Итак, вопрос будет в том, как заставить это работать должным образом в IE8?

Пожалуйста, предоставьте ответ в качестве реального рабочего примера на jsfiddle ...

У этого пользователя точно такая же проблема. Он не получил ответа, кроме этого , который явно не работает, поэтому я прошу предоставить рабочий пример, демонстрирующий его на jsfiddle