Styling CSS Highlight Pseudo-elements A Deep Dive into search-text & Friends

With the recent release of Chrome 144, ::search-text has joined the family of CSS highlight pseudo-elements. These selectors target text highlighted for various reasons—find-in-page matches, URL text fragments, user selection, and more. If you've ever been confused about which pseudo-element does what, you're not alone. This guide will clearly compare all of them and provide practical styling strategies you can use today. The original insights are based on this comprehensive article on CSS-Tricks.

Comparison Table: Highlight Pseudo-elements

Here’s a clear breakdown of what each pseudo-element selects and key notes.

Pseudo-selector	Selects…	Notes
::search-text	Find-in-page (Ctrl/Cmd+F) matches	::search-text:current selects the current active match
::target-text	Text highlighted via URL Text Fragments	Often used by search engines or external links
::selection	Text selected by the user with a pointer
::highlight()	Custom highlights defined by JavaScript's Custom Highlight API
::spelling-error	Misspelled words (mostly in editable content)
::grammar-error	Grammatical errors (mostly in editable content)

The <mark> HTML element serves a similar purpose but is not a pseudo-element. Pay special attention to the difference between ::search-text and ::target-text, as they are often confused but originate from different user interactions.

Creating Accessible Highlights with Relative Color Syntax

The default highlight colors (e.g., yellow for ::search-text) may not have sufficient contrast with your page's background, harming readability. CSS Relative Color Syntax allows you to programmatically generate an inverse color based on the background, ensuring high visibility and accessibility.

body {
  --background: #38003c;
  background: var(--background);
}

::selection,
::target-text,
::search-text {
  /* Set text color to match the background */
  color: var(--background);
  /* Invert the background color by subtracting each RGB channel from 255 */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}

This code completely inverts the --background color for the highlight background, making it stand out against any backdrop. Remember, this isn't a silver bullet for contrast—always test, as colors like #808080 invert to themselves.

Visually Distinguishing Different Highlights

To handle cases where highlights might overlap, it's good practice to style them slightly differently. The example below modifies the inversion logic for each type.

::selection {
  /* Keep R channel, invert G and B */
  background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
  /* Keep G channel, invert R and B */
  background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
  /* Keep B channel, invert R and G */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
  /* Current find-in-page match, fully opaque */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}

Conclusion & Best Practices for Implementation

The core purpose of styling highlights is to help users quickly locate and distinguish information. Sometimes, this means making functional elements boldly stand out rather than blending them seamlessly into your design palette.

1. Always Test Contrast: Relative Color Syntax is a tool, not a guarantee. Use browser DevTools accessibility checks or dedicated Color Contrast Analyzers to verify results, especially for edge cases.
2. Respect Platform Conventions: Elements like ::spelling-error (red underline) and ::grammar-error (green underline) have strong native affordances. Overriding them should be done with clear user benefit in mind.
3. Look to the Future: Once the CSS Color Module Level 5 contrast-color() function ships, it will simplify choosing an optimal foreground color against any background.

Understanding and properly styling highlight pseudo-elements, starting with the new ::search-text, is becoming an essential skill for the modern web developer. Use this knowledge as an opportunity to significantly enhance both user experience and accessibility on your sites.