Skip to Content

How do I highlight text in custom CSS?

By: Author Color With Leo

Highlighting text on a website can help draw attention to important information or make certain elements stand out. With Cascading Style Sheets (CSS), you can easily add custom text highlighting to your site. In this guide, I’ll explain a few different methods for highlighting text with CSS.

Using the ::selection Selector

One simple way to highlight text is with the ::selection pseudo-element. This allows you to style text when a user selects it with their cursor.

For example, you can make selected text have a yellow background like this:


::selection {
  background-color: yellow;
}

Now any text the user highlights will have a yellow background. You can customize the styling further with properties like color, background-color, font-weight, etc.

Styling Links

Another common way to highlight text is by styling link elements. Since links are already colored by default, you can build on that styling to draw more attention to them.

For example, you can style links to have a yellow background on hover:


a:hover {
  background-color: yellow;
}

You can also increase the font weight on active links:


a:active {
  font-weight: bold; 
}

This will make links appear bolder when clicked on. Play around with different styles like text-decoration, color, and border to customize link highlighting further.

Using the ::before and ::after Pseudo-Elements

The ::before and ::after pseudo-elements allow you to insert content before or after an element’s actual content. This makes them useful for highlighting text.

For example, you can highlight important paragraphs by adding a yellow background on either side:


p.important::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 5px;
  background-color: yellow;
}

p.important::after {
  content: "";
  display: inline-block;
  height: 100%; 
  width: 5px;
  background-color: yellow; 
}

Now any paragraph with the important class will have a 5px yellow bar on the left and right. You can tweak the width, height and styling further to your needs.

Using Spans

For highlighting specific words or phrases, you can wrap them in a <span> element and apply styles. For example:


<p>This is a <span class="highlight">highlighted</span> word.</p>

.highlight {
  background-color: yellow;
}

The highlight class will target just the wrapped word, leaving the rest of the text unaffected. You can reuse this class to highlight multiple important keywords.

Using the text-shadow Property

Adding a text shadow can also help text stand out on the page. For example:


.shadowed {
  text-shadow: 1px 1px yellow;
}

This will add a 1px yellow shadow to the right and bottom of the text. Play with the offset values and color to control the intensity of the shadow effect.

Animating Highlighted Text

For an extra touch, you can animate highlighted text to make it transition smoothly. One way is with the CSS transition property:


.highlight {
  background-color: yellow;
  transition: background-color 0.5s ease;
}

.highlight:hover {
  background-color: #ffa500; 
}

This will animate the background color change on hover over 0.5 seconds. You can apply similar transitions to other properties like color, text-shadow, transform, etc.

Keyframes animations are another option for more complex effects. For example, this pulsating animation:


@keyframes pulse {
  0% {
    background-color: yellow;
  }
  
  50% {
    background-color: #ffa500;
  }

  100% {
    background-color: yellow; 
  }
}

.highlight {
  animation: pulse 1s infinite;
}

So in summary, CSS provides a lot of useful tools for highlighting text on a page:

  • The ::selection pseudo-element targets highlighted text
  • Link styling like :hover and :active can draw attention
  • ::before and ::after allow highlighting bars around text
  • <span> elements highlight specific words and phrases
  • text-shadow adds a colored shadow behind the text
  • Animations like transitions and keyframes add movement

Combine these different techniques to implement custom text highlighting suited to your design. The possibilities are endless!

Common Issues When Highlighting Text

While highlighting text in CSS is straightforward, there are a few potential issues to keep in mind:

  • Overusing highlights can make text harder to read. Use sparingly on key info.
  • Highlighting blocks of text can seem overwhelming. Consider just key phrases.
  • Too many colors and animated effects may be distracting.
  • Light colored highlights won’t show up on light backgrounds.
  • Small highlights like spans are hard to see on mobile devices.

Test your highlighting on different devices and viewports to make sure text remains legible. And remember that highlights should complement your content, not compete with it.

Styling Code Highlighting

In addition to standard text, you may also want to highlight code samples on your site. This is commonly done by passing code through a syntax highlighter tool before display.

These tools analyze the code syntax and automatically add styling like colors and bolding to enhance readability. For example:


/* Styles */

body {
  font-family: Arial; 
  margin: 0;
  padding: 0;
}

h1 {
  color: blue;
}

The CSS keywords are bold and a different color, while the comments are grayed out. This makes it easier to quickly scan and understand the code.

There are many syntax highlighting libraries to choose from like PrismJS, Highlight.js, and Google Prettify. Most work by adding spans and classes around code elements which you can then style with CSS.

For example, PrismJS adds classes like:


<span class="token keyword">font-family</span>: Arial;

You can then target the keyword class to style keywords differently:


.token.keyword {
  color: blue;
  font-weight: bold;
}

Syntax highlighters generally have built-in themes you can use for common languages like CSS, JavaScript, and HTML. You can also create custom themes by overriding the provided styles.

Overall, leveraging a syntax highlighter is the easiest way to implement clean, readable code highlighting.

Conclusion

Highlighting important text on a page helps guide users to key information. CSS provides flexible tools like pseudo-classes, pseudo-elements, shadows, animations, and more to customize text styling. With a bit of creativity, you can implement highlighting tailored to your content and design.

Some key takeaways:

  • Use ::selection for highlighted selections
  • Style links and hover states to draw attention
  • Add background bars with ::before/::after
  • Highlight phrases with <span> elements
  • Animate changes for smooth transitions
  • Leverage syntax highlighters for code

Text highlighting goes a long way in improving readability. With CSS, the possibilities are endless for creating beautiful, engaging highlights on your site.