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?

Radish

The issue doesn't seem to be related to pseudo-elements, this behaves exactly the same: jsfiddle.net/UJAjD/4 – Steroid

True, so it seems its just as Boris mentioned below. Thanks. – Radish

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...

Seamount

Makes sense. Taking this into consideration all I have to do is change :before to :after so that it's no longer the first line. Thank you. – Radish