I have a variable width header that must have a background color that is as wide as the text (no wider). The only way I can think of doing this (with no extra markup) is to set the display to inline-block or float it to the left. The problem then though is that I cannot center the header (another requirement).
The closest I have got so far is by setting position: relative; on a floated header, pushing it across 50% from the left and then pulling it back 25% with negative margin, however this does not consistently center the header. It must remain in the flow of the document so position: absolute; is another no-go.
If you are aware of a way to do this using CSS only with no extra markup please let me know (pseudo-elements are fine, I’m not hassled about IE7 support)!
Solved using display: table; on the heading (with margin: 0 auto;).