How to make a "highlighter" effect for text background in CSS?

Question

How would I go about highlighting an inline part of a paragraph decorated with a "highlighted" effect as if it were marked by a real highlighter on paper.

<p> The dog <em>jumped over</em> the lazy fox.</p>

Here I want to apply that effect to the em element. Im looking for something more than just background-color: yellow. Something thats a little non-linear.

For instance, something like in this picture -

Answer 1

The proper way to do that is with the <mark> element. CSS alone can't produce that realistic effect. Therefore, you'd have to use some sort of graphic.

Answer 2

In case you choose to go for graphics, you could use CSS2 background images, and have a long fixed height graphic with the highlighter irregularities, or you could also use CSS3 border image effects, and use any height you want.

So for example, starting with a graphic like this:

You can use something like:

div#myElement { 
   border-image-source: url(../img/border-image.png); 
   border-image-slice:26; 
   border-width:26px; 
   border-image-outset:5px; 
   border-image-repeat: repeat;
   height:182px; 
   width:182px; 
}

And en up with this:

In both cases, you will need a graphic big enough to crate irregularities without looking like a pattern.

Source: Crazy Egg Blog