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

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.

Quick Examples

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

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

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

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

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