DEV Community

Robin Alex Panicker
Robin Alex Panicker

Posted on

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.

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.

Top comments (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

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

Thank you @amberbdr789 🙏