Text with background, padding on the end of each line, and a gap between lines

Long descriptive title. Check. Seemingly simple problem thats actually quite awkward. Check.

The problem

The problem is you can’t just add padding and a background colour to the heading because it will only be applied to the beginning of the first line, and the end of the last line. Lines in between won’t have any padding. Like this:

There are quite a few examples of achieving the desired effect, but without the gap between lines. Like wrapping text in a <span>, giving the span a background, then negative margin-ing the text pulling it into a one sided border.

Clever, but it won’t give you a gap. CSS tricks has a good rundown of solutions, the technique below is my favoured one. I’ve tested it down to IE8 and it works great.

The Solution

Box shadow to the rescue!

First, the HTML. Nest a <span> inside your heading.

<h2><span>Could you benefit from having Alfi in your home?</span></h2>

Then throw this CSS as it. Just make sure your line height is great enough to give that lovely gap.

h2 {
 line-height: 1.8em;
 font-size: 1.7em;
 display: inline;
 }

h2 span {
 padding: 0.2em;
 box-shadow: 0.2em 0 0 rgba(#fff,0.7), -0.2em 0 0 rgba(#fff,0.7);
 background-color: #fff;
 background-color: rgba(#fff,0.7);
 }

Ta daa