Background color on text, maintain left padding on line wrap

Question

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: ```

Lorem ipsum dolor sit amet consectetur adipiscing elit.

``` 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:…

Accepted Answer

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.

Background color on text, maintain left padding on line wrap

Solution

Problem