CSS ::highlight()

The ::highlight() pseudo-element styles named ranges registered through the CSS Custom Highlight API. It is different from ::selection, which styles text selected by the user.

Syntax

::highlight(name) {
  background: yellow;
  color: black;
}

Example

::highlight(search-result) {
  background: #fde68a;
  color: #111827;
}

const range = new Range();
range.setStart(textNode, 0);
range.setEnd(textNode, 4);
CSS.highlights.set("search-result", new Highlight(range));

Result:

Custom highlights require registered ranges before CSS can style them.

Important note

For ordinary mouse selection, use ::selection. Use ::highlight(name) when script creates named highlight ranges.