Z-index с псевдоэлементом before

Я создал элемент 'header' с элементом before-pseudo. элемент pseudeo должен находиться за родительским элементом. Все работает отлично до того момента, когда я задаю своему 'header' z-index.

Что я хочу: Желтый 'header' на переднем плане, красный псевдоэлемент на заднем плане и простой z-индекс 30 для желтого элемента 'header'.

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;
}

Вы можете проверить мою проблему по этой ссылке (http://jsfiddle.net/tZKDy/) и вы видите проблему, когда вы устанавливаете/убираете z-index на элементе de 'header'.