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.
Top comments (8)
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
markin 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 wasstrong.Nice article btw 😀
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
markit 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
strongin this case, as it's putting an emphasis on some keywords in the headline.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>I think
strongoremmight 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
spanwould be too weak.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? :DJust discovered you can tweak colors in a svg file set as a background on the fly. Pretty convenient
Nice trick!