DEV Community

loading...
Cover image for How to Create Marker Highlight Effect in CSS?

How to Create Marker Highlight Effect in CSS?

shubhamjain profile image Shubham Jain Originally published at svgbox.net ・2 min read

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.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (9)

pic
Editor guide
Collapse
mrdanielschwarz profile image
Daniel Schwarz

Use semantic HTML: <mark></mark>

Collapse
jonaslinn profile image
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.

Collapse
mrdanielschwarz profile image
Daniel Schwarz

Why <strong> or <em>? The text is neither bold nor italic. <mark> is specifically for highlighted text.

Thread Thread
jonaslinn profile image
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.

Thread Thread
mrdanielschwarz profile image
Daniel Schwarz

I see where you're coming from, but I think if you're using a marker effect for anything other than marking then you're using it wrong. In my opinion it's a bad design decision, similar to underlining something that isn't a link.

Thread Thread
jonaslinn profile image
Jonas Linn • Edited

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 😀

Thread Thread
mrdanielschwarz profile image
Daniel Schwarz

I think you're misunderstanding what I'm saying.

I agree with you that <mark> wouldn't convey the right meaning.

What I'm saying is, the marker effect shouldn't be used at all. Looks should match the meaning, otherwise it's just bad design.

Collapse
marmeden profile image
eneasmarin

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

Collapse
alvaromontoro profile image
Alvaro Montoro

Nice trick!