Expanding CSS shape with text

Question

I've been working on trying to get this CSS shape to expand with text and I am not sure if it's even possible since the text is position:absolute; above (or in front rather) of the CSS shape.

Here's my fiddle: http://jsfiddle.net/W2SPd/10/

Any suggestions?

Answer 1

I've rearranged your CSS: Updated Fiddle

Basically it involves removing the position:absolute and fixed width, and instead allowing a dynamic with (using display:inline-block) and moving the text into place with position:relative instead.