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.

Comments

[Jonas Linn]

Which element would you use if just the color was red? Also mark?
Looks are not always the same as its meaning.
Semantics are only about the meaning. And mark in this context of a headline has not the right meaning. The styling as a marker is just an artistic way of saying this is more important than the rest. It has the same meaning as if it was strong.

Nice article btw 😀

[Jonas Linn]

Because you are just putting an emphasis on the highlighted text. You could underline it, make it bold or italic or just change its background. Thing is with mark it is about user relevance. Is the user actively searching for these highlighted words or are you just decided that these words are important?
Changing the background or make it bold is more or less semantically the same.

That is why I would prefer to use strong in this case, as it's putting an emphasis on some keywords in the headline.

[Kathy Osborne]

When I place this code in our sales page, the image repeats rather than stretching across the words. I'm not sure what I'm doing wrong. Here is what I have:

Code I'm using:
.marker-pink {
background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-5&color=ffff43);
margin: -2px -6px;
padding: 2px 6px;
}

<span class="marker-pink">Menopause Magic</span>

[Jonas Linn]

I think strong or em might be better suited. But it depends on the use case.
Here it is just a way to highlight / to put emphasis on these words.
But I agree span would be too weak.

[Manav Misra]

Don't use for syntax highlighting purposes; instead, use the element with appropriate CSS applied to it.

[Lueh]

Its funny how you start complaining with "Use semantic HTML: <mark></mark>" and then you just say that no one should use mark?! I think you just wanted to discuss, am I right? :D

[eneasmarin]

Just discovered you can tweak colors in a svg file set as a background on the fly. Pretty convenient

[Alvaro Montoro]

Nice trick!