---
title: "CSS Highlight Pseudo-elements"
description: "CSS4 provides ability to select highlighted content for styling. Practical notes and code examples on CSS Highlight in JS."
url: "https://h3manth.com/scribe/css-highlight-pseudo-elements/"
canonical_url: "https://h3manth.com/scribe/css-highlight-pseudo-elements/"
markdown_url: "https://h3manth.com/scribe/blog/css-highlight-pseudo-elements.md"
publishDate: "2021-01-07T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["css","web","pseudo-elements"]
word_count: 152
reading_time_minutes: 1
x_markdown_tokens: 346
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# CSS Highlight Pseudo-elements

> CSS4 provides ability to select highlighted content for styling. Practical notes and code examples on CSS Highlight in JS.

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

```css
::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.