css - 疑似要素での z-Index の動作

Question

見る：

http://jsfiddle.net/Kq2PY/

div は z-index 5 で相対、:after は z-index 2 で絶対です。

だから、divの後ろにいるべきではありませんか？

div{
    position:relative;
    z-index: 5;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: 2;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>

Answer 1

疑似要素に負のz-indexを指定して、親の背後に配置し、さらに親のz-indexを削除する必要があります。 http://jsfiddle.net/jklm313/Kq2PY/4/

div{
    position:relative;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: -1;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>