:: antes da emissão do pedido de empilhamento de pseudo-elementos

Quando posicionado estaticamente, as pilhas do pseudoelemento :: before (z-index) antes do conteúdo da criança, mas após o histórico da criança. Alguém pode explicar por que ou até mesmo como isso está acontecendo ou se isso é um problema que todos os principais navegadores têm?

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

http://jsfiddle.net/funkyscript/ALrgf/

questionAnswers(1)

yourAnswerToTheQuestion