CSS - apply padding to inline element across two lines

Question

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

My CSS

Answer 1

My boss loves using this feature in his designs recently, so I've had to come up with some solutions. Luckily for most of the ones we're doing, they are for titles on Sliders which will always be on two lines, so I took to using before and afters to insert a 10px line before each line of text. Not great cross browser compatibility I know, but works okay and doesn't look appalling in IE.

Here's a little jsFiddle to explain it:

http://jsfiddle.net/mP5vg/

This is the only pure CSS solution I could find.

P.S. Sorry for my messy code.