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

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 –


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.

Source : Link , Question Author : Sri Kadimisetty , Answer Author : Chris Burton

Leave a Comment