How to Create Marker Highlight Effect in CSS?

Highlighting text in the copy is a great way to draw attention to certain phrases in a relatively long text. And there's an even better way to make it more effective: make the highlight look like it's actually marked. An example can be seen on Hotjar's landing page.

I run a side-project called SVGBox, where I offer the simplest way to start using icons. Recently, I added pen-burshes iconset, and using that you can create the same effect by using the brushes as background images and customizing the fill color. Let's see how:

Creating the Marker Effect

I'll use the brush-1 to create the simplest effect possible.

<style>    .highlight {        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);    }</style><div>    This is a <span class="highlight">        highlighted part    </span> of the text</div>

This looks decent but the highlighted background could be positioned and sized better. It should stretch on both sides, and a little bit on the Y-Axis as well.

<style>    .highlight {        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);        margin: -2px -6px;        padding:  2px  6px;    }</style><div>    This is a <span class="highlight">        highlighted part    </span> of the text</div>

This looks much better and is already pretty usable. You can also experiment with different colors. I really like using HSL color format here, since I can adjust lightness much more easily. SVGBox supports the most common color formats, making this process easier.

And also different brushes:

And that's it, a really easy way to add this effect to your web page.