Why is animating an element breaking the stacking context of associated pseudo-elements?

Question

When I'm animating an element that has associated ::before and ::after generated content, the generated content, which was previously negative z-indexed, appears to become indexed higher than my original element. I'm seeing this in Chrome, Safari, and Firefox.

I know that's confusing, so here's a fiddle.

Any ideas where I'm going wrong, or if I've run into a bug?

Answer 1

The paragraph text stays on top. Maybe wrap the "p" in another "div" and see if it persists w/ a wrapper. http://jsfiddle.net/q7Qh5/17/