z-Index behaviour on pseudo elements

Question

see:

http://jsfiddle.net/Kq2PY/

the div is relative with z-index 5, and the :after thing is absolute with z-index 2.

So shouldn\'t :after be behind the div?

Answer 1

You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent. 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>

Answer 2

div { z-index: 1; }

div::after { z-index: -1;}