7 Cool CSS Highlight Text Effects 😎

ORIGINAL SOURCE: CSS Highlight Text

In this short tutorial I will show you several cool ways in which you can use CSS to highlight text. Just like on paper, you highlight text in a HTML page to draw attention to important sections, paragraphs or group or words. On paper you might use a marker, highlighter or even a colored pen or pencil, but how do you highlight text in HTML using CSS?

How to Highlight Text In Pages:

Standard <mark/> Highlight Tag In HTML

Yes, HTML offers a standard way to highlight text in pages using the <mark/> tag around the text you want to highlight.

The HTML Mark Tag (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage’s relevance or importance in the enclosing context.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

Let’s see an example!

HTML code:

<p>The HTML Mark Tag indicates a portion of the document's content 
which is <mark>likely to be relevant to the user's current activity</mark>. 
This might be used, for example, to indicate the words that matched 
a search operation.</p>

Which renders by default like this:

The HTML Mark Tag indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.

You can easily change text highlight color with CSS like this:

mark{
 background-color:#c0ffc8;
}

Ribbon CSS Highlight Text Effect

HTML Code:

<p>Ribbon <span class="ribbon-highlight">Highlight Text</span> Effect</p>

CSS Code:

.ribbon-highlight{
  position:relative;
  margin:0.1em;
}
.ribbon-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:lightgreen;
  position:absolute;
  width:100%;
  border-left-color:transparent;
  border-right-color:transparent;
}

No need for much explanations here. You can change the text highlight color by changing the border-color property in the CSS.

The ribbon effect is achieved by using a CSS trick that involves the use of border for creating triangles. If you want to learn more about that, check out my awesome CSS Triangle tutorial.

Arrow CSS Highlight Text Effect

HTML Code:

<p>Arrow <span class="arrow-highlight">Highlight Text</span> Effect</p>

CSS Code:

.arrow-highlight{
  position:relative;
  margin:0 0.5em;
  padding:0 0.2em;
}
.arrow-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:orange;
  position:absolute;
  width:calc(100% - 0.5em);
  border-left-color:transparent;
}

.arrow-highlight:after{
  content:"";
  z-index:-1;
  right:0;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:orange;
  position:absolute;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
  transform:rotate(180deg);
  transform-origin:center right;
}

The arrow CSS highlight text effect is a variation on the ribbon highlight effect. Using an extra pseudo element :after I am adding the tip of the arrow also using the CSS triangle trick as above. Again, you can easily change the color of the text highlight effect by changing the border-color.

Border CSS Highlight Text Effect

HTML Code:

<p>Border <span class="border-highlight">Highlight Text</span> Effect</p>

CSS Code:

.border-highlight{
  border:2px dashed red;  
  padding:0.03em 0.25em;
}

Sketch CSS Highlight Text Effect

HTML Code:

<p>Sketch <span class="sketch-highlight">Highlight Text</span> Effect</p>

CSS Code:

.sketch-highlight{
  position:relative;
}

.sketch-highlight:before{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.5;
  border-radius:0.25em;
}

.sketch-highlight:after{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.5;
  border-radius:0.25em;
}

For this text highlight effect I tried to create a highlight style that looks like doodle sketches made around the highlighted words with a blue ballpoint pen. I think it looks pretty good, just like handwriting.

The effect is made up of two pseudo elements :before and :after, using border-radius to make rounded borders and a rotate transform with a small value to add that handwriting doodle sketch effect to the CSS text highlight.

The text highlight color is darkblue to mimic the ballpoint pen and I also reduced the opacity a bit. You can play around with the settings and get your own sketch CSS highlight text effect.

Circle Sketch CSS Highlight Text Effect

HTML Code:

<p>Circle sketch <span class="circle-sketch-highlight">Highlight Text</span> Effect</p>

CSS Code:

.circle-sketch-highlight{
  position:relative;
}

.circle-sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.1em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}

.circle-sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}

This highlight effect is similar to the sketch effect with the difference that this looks like the highlighted words are circled using a red ballpoint pen. You can change the color of the highlight text effect by changing the border-color.

Realistic Marker CSS Highlight Text Effect

For this highlight effect I am using an extra trick: a SVG filter. I need this to give the wavy edges of the highlight box around the text.

HTML Code:

<p>Realistic Marker <span class="realistic-marker-highlight">Highlight Text</span> Effect</p>

CSS Code:

.realistic-marker-highlight{
  position:relative;
}

.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  top:0.1em;
  padding:0 0.25em;
}

And the SVG Filter Code:

<svg xmlns="//www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;">
  <defs>
    <filter id="marker-shape">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

The SVG code can be safely added right inside the HTML code of the page where you want to use this realistic marker CSS highlight text effect.

Notice that the SVG filter has the ID marker-shape and that I’m referencing this filter by ID in the CSS code filter:url(#marker-shape);. Without going too much in detail, the SVG filter acts like a displacement map or a distortion effect on the highlight box. I’ve used a similar effect on my online wavy text generator.

I think that SVG filters are a very powerful tool, but sometimes complicated to use. If you would like to learn more about what you can do with them check out my 80s fonts SVG filters.

How to Highlight Text in Other Tools

Besides highlighting text in HTML and CSS, there are other tools or software where you might want to highlight portions of text.

Let’s quickly see a couple of examples and solutions for those situations:

How to highlight text in Photoshop?

To be honest, to highlight text in Photoshop is not as easy as you might think. Going into a tutorial on how to highlight text in Photoshop is beyond the scope of this article, but I will tell you how I do it.

I use this free Photoshop action from PhotoshopSupply.com: Highlight Text in Photoshop. You download it, install it and with one click you can highlight text in Photoshop with several different effects.

How to highlight text online?

Yes, you can even highlight text online. For this I use the MockoFun text highlighter online. In my opinion this option is far superior to using Photoshop or any other graphic design tool.

How to highlight text in Word, LibreOffice or Open Office?

Simply select the text you want to highlight and use the Highlight Tool. Select a color and you’re DONE!

In Conclusion

If you want to highlight text in HTML pages, now you have several highlight text styles and effects that you can use just by copy/pasting the CSS code to your page. Let me know if you liked any of the text highlight methods by leaving a comment below.

ORIGINAL SOURCE: CSS Highlight Text