: 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

@Ravi4787994

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

Vote Up Vote Down

@Angie364

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.

Vote Up Vote Down