Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 -

share|improve this question

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.

share|improve this answer
You are right. mark is the right element and yes, I guess one could use a graphic as a background and set proper spacing around the element. – sri Apr 14 '13 at 9:51

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:

enter image description here

You can use something like:

div#myElement { 
   border-image-source: url(../img/border-image.png); 
   border-image-repeat: repeat;

And en up with this:

enter image description here

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

Source: Crazy Egg Blog

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.