css - make achor tag block but only highlight text, ot the whole element

Question

I'm trying to mimic a graphic print trend in which you highlight headers. Pretty simple.

I need to add little padding to the text to make it more pleasing to the eye and readable.

Problem arises when text is wrapped - the padding only affects the first line making it appear as if the header is indented. Making the element (anchor) block-level fixes this, but then the whole element is highligtet and not just the text.

Can this be done using only css? It would be loathsome having to add javascript for such a simple thing.

Tjek the website here. Most of the headers a fairly short why the problem doesn't occur.

Answer 1

Yes, this can be done using only CSS. Here's a post on CSS-Tricks detailing several methods for handling this issue.

One of them involves using box-shadow to apply the padding effect. Simply set two shadows, each with a horizontal offset of your desired padding along with the color of the highlight:

.highlight {
  -webkit-box-shadow: 10px 0 0 orange,
                     -10px 0 0 orange;
  -moz-box-shadow: 10px 0 0 orange,
                  -10px 0 0 orange;
  box-shadow: 10px 0 0 orange,
             -10px 0 0 orange;
}

Demo

Answer 2

CSS:

h1 {
    background:#ff0;
    color:#000;
    box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
    -moz-box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
    -webkit-box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
}

Where #ff0 is the color you want the background to be.