CSS ::highlight() pseudo-element

Definition and usage

CSS ::highlight() Pseudo-elements are used to set custom highlight styles.

Custom highlighting is a set of Range objects, registered on the web page through HighlightRegistry.

Note:The following properties can be used with ::highlight() Used together:

• color
• background-color
• text-decoration
• text-shadow

Example

Set four custom highlight styles:

::highlight(mycolor-1) {
  color: red;
}
::highlight(mycolor-2) {
  color: green;
}
::highlight(mycolor-3) {
  color: blue;
}
::highlight(mycolor-4) {
  color: salmon;
}

Try it yourself

CSS syntax

::highlight(custom-highlight-name) {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

Related pages

Tutorial:CSS Pseudo-elements