Why doesn't text-indent work when its container has a :before/:after pseudo-element? (FX/Opera)

Question

Ran into this quirk today.

http://jsfiddle.net/UJAjD/3/

You'll notice that in Firefox 7 and Opera, the gray box has the word "Next" in it. The CSS includes a text-indent property that should move that text outside of its container. Viewing this page in IE or Chrome shows it the way it should. At least the way that you would think it should show.

Is this a known bug? Is there a workaround?

Answer 1

Per spec, text-indent affects the text in the first line box of the block.

The problem is that the spec doesn't really make it clear whether the first line box in this case contains the block or the text, and different UAs interpret the spec differently...