Text highlighting using HTML and CSS

Web devs,

Looks like some of you are using background images for text highlighting. There is a simple and better way to do that using CSS.

So here is the html and css code for highlighting text.

HTML

<h1>
   <mark>Detect and report bugs</mark> in iOS & Android mobile apps, watchOS apps.
</h1>

CSS

mark, strong {
  padding: 0.2em;
  background: linear-gradient(to bottom, #d6ffff 0%, #d6ffff 100%) no-repeat;
  background-size: calc(100%) calc(50%);
  background-position: bottom;
}

This CSS works with most text tags including <span>, though I prefer using <mark> or <strong> to indicate the importance of the highlighted text.

BTW you need to use calc for background-size only if more calculation needs to be done. No need to use for this particular example though. Just added here for highlighting what all can be done.

Comments

[Yannick Eich]

Awesome idea. I will try it in one of my upcoming Projects ;)

[Robin Alex Panicker]

Thank you 🙏.

[Amber Bdr. Kharka]

Wow.. i had this same question, thank you for sharing..

[Robin Alex Panicker]

Thank you @amberbdr789 🙏