Pen highlighter effect in css

Question

I want to create a highlight effect that resembles a highlight made with a pen. i.e. it has wavy tops and bottoms and a rough start and end, like in this picture.

Answer 1

Not using a background color..no.

Backgrounds extends to the edges of the element which are always rectangular (barring border-radius)

In this case, a background image would probably the the optimal choice...BUT:

You can achieve a similar effect using multiple text-shadows.

A brief example.

.green-highlight {
  text-shadow: 
     3px 0px 3px green,
    -3px 0px 3px green,
     6px 0px 6px green,
    -6px 0px 6px green;

}

.red-highlight {
  text-shadow: 
     3px 0px 3px red,
    -3px 0px 3px red,
     6px 0px 6px red,
    -6px 0px 6px red;
}

.yellow-highlight {
  text-shadow: 
    -3px 0px 3px yellow,
     3px 0px 3px yellow,
     6px 0px 6px yellow,
    -6px 0px 6px yellow;
}

  So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. 
  Don't just write words. 
  Write music. 

It's just a matter of using as many shadows as you need to get the full effect you need,