The CSS Pseudo-Elements Level 4 (CSS4) provides an ability to select highlighted content, these represent a portions of a document that needs particular status and are typically styled differently to indicate that status to the user.

We have the below Highlight Pseudo-elements:

• ::selection: the portion of a document that has been selected as the target

• ::target-text: represents text directly targetted by the document URL’s fragment

• ::spelling-error: content that has been flagged by the user agent as misspelled.

• ::grammar-error: content that has been flagged by the user agent as grammatically incorrect.

Note: A future level of CSS may introduce ways to create custom highlight pseudo-elements.

Let us see few quick examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

::selection {
  background-color: #ff69b4;
}

::target-text {
  background-color: #ff69b4;
}

::spelling-error {
  text-decoration: underline wavy red;
}

::grammer-error {
  text-decoration: underline wavy green;
}

P.S: Modern browsers are yet to implement the last 3 of these pesduo elements.