Z-index with before pseudo-element

[kenfary]

I've created a 'header' element with a before-pseudo element. the pseudeo element must be behind the parent element.Everything works great till the moment I give my 'header' a z-index.What I want: The yellow 'header' on the foreground, the red pseudo-element in the background and a simple z-index of 30 on the yellow 'header' element.\[code\]header { background: yellow; position:relative; height: 100px; width: 100px; z-index:30; /*This is the problem*/}header::before { content:"Hide you behind!"; background: red; position:absolute; height: 100px; width: 100px; top:25px; left:25px; z-index:-1;}\[/code\]You can test my problem on this link (http://jsfiddle.net/tZKDy/) and you see the problem when you set/remove the z-index on de 'header' element.