Background color on text, maintain left padding on line wrap

Issue

I am attempting to create a style that applies a background color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the left padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I'm having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it's off in Firefox, etc. I've created a fiddle to demonstrate:

http://jsfiddle.net/spidercoder/4KJn2/1/

My approach is:

HTML:

<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>

CSS:

h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border

h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}

I've attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect.

Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn't require the left-border would probably be best, so that we don't have to match element heights.

Thanks for any suggestions!

Solution

Add to the span:

box-shadow: 10px 0 0 black, -10px 0 0 black;

Or Just:

box-shadow: -10px 0 0 black;

Used this myself after finding it here:

http://css-tricks.com/multi-line-padded-text/

There are many other methods by which this can be done listed there.

Answered By - JackArbiter