DEV Community

loading...

Text highlighting using HTML and CSS

Robin Alex Panicker
Software Engineer. Architecting Finotes - an SDK that autodetect bugs in mobile apps.
・1 min read

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.

Alt Text

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

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

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.

Discussion (4)

Collapse
yeich profile image
Yannick Eich

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

Collapse
robin_a_p profile image
Robin Alex Panicker Author

Thank you 🙏.

Collapse
amberbdr789 profile image
Amber Bdr. Kharka

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

Collapse
robin_a_p profile image
Robin Alex Panicker Author

Thank you @amberbdr789 🙏