DEV Community

Cover image for How to Create Marker Highlight Effect in CSS?
Shubham Jain
Shubham Jain

Posted on • Updated on • Originally published at svgbox.net

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.

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.

Top comments (8)

 
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 😀

 
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.

Collapse
 
koartdesign profile image
Kathy Osborne • Edited

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:
Image description

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>

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.

 
codefinity profile image
Manav Misra

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

Thread Thread
 
lueh profile image
Lueh • Edited

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

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!