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

3.6k Views Asked by At

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?

1

There are 1 best solutions below

1
On BEST ANSWER

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