index.md

---
title: CSS pseudo-elements
short-title: Pseudo-elements
slug: Web/CSS/Guides/Pseudo-elements
page-type: css-module
spec-urls: https://drafts.csswg.org/css-pseudo/
sidebar: cssref
---

The **CSS pseudo-element** module defines abstract elements that are not directly present in the document tree. These abstract elements, called pseudo-elements, represent portions of the render tree that can be selected and styled. Pseudo-elements are used to create abstractions about the document tree beyond those provided by the document tree.

> [!NOTE]
> This page introduces a CSS module. To find an exhaustive list of all pseudo-elements defined by CSS specifications, see the [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) reference page.

Pseudo-elements are prefixed with a double colon (`::`). You add pseudo-elements to selectors (as in `p::first-line`) to target and style these faux elements.

Pseudo-elements enable targeting entities not included in HTML and sections of content that cannot be targeted otherwise without adding extra markup. Consider the placeholder of an {{HTMLelement("input")}} element. This is an abstract element and not a distinct node in the document tree. You can select this placeholder by using the {{CSSXref("::placeholder")}} pseudo-element. As another example, the {{CSSXref("::selection")}} pseudo-element matches the content currently highlighted by a user, allowing you to style what is matched as the user interacts with the content and changes the selection. Similarly, the {{CSSXref("::first-line")}} pseudo-element targets the first line of an element, updating automatically if the character count of the first line changes, without having to query the element's line length.

## Reference

### Selectors

- {{CSSXref("::after")}}
- {{CSSXref("::before")}}
- {{CSSXref("::file-selector-button")}}
- {{CSSXref("::first-letter")}}
- {{CSSXref("::first-line")}}
- {{CSSXref("::grammar-error")}}
- {{CSSXref("::highlight()")}}
- {{CSSXref("::marker")}}
- {{CSSXref("::placeholder")}}
- {{CSSXref("::search-text")}}
- {{CSSXref("::selection")}}
- {{CSSXref("::spelling-error")}}
- {{CSSXref("::target-text")}}

The specification also defines the `::details-content` pseudo-element and the `::postfix` and `::prefix` sub-pseudo elements. These are not yet supported by any browser. The {{CSSXref("::highlight()")}} pseudo-element is included within this module, but most details are provided in the [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API).

### Interfaces

- {{DOMxRef("CSSPseudoElement")}} interface
  - {{DOMxRef("CSSPseudoElement.element")}} property
  - {{DOMxRef("CSSPseudoElement.type")}} property

### Terms

- {{Glossary("Pseudo-element")}} glossary term

## Guides

- [CSS pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements)
  - : Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT.

- [Learn: Pseudo-classes and pseudo-elements](/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements)
  - : Part of CSS building blocks section on selectors. This article defines what a pseudo-element is and how it can be combined with pseudo-classes and be used for generating content with `::before` and `::after` pseudo-elements.

- [How to create fancy boxes using pseudo-elements](/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Create_fancy_boxes#pseudo-elements)
  - : Example of styling generated content using `::before` and `::after` pseudo-elements for visual effects.

## Related concepts

- {{cssxref("::backdrop")}}

- Web Video Text Tracks Format (WebVTT) cues:
  - {{cssxref("::cue")}}
  - {{cssxref("::cue()")}}

- [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module
  - {{cssxref("::column")}}

- [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
  - {{cssxref("::scroll-button()")}}
  - {{cssxref("::scroll-marker")}}
  - {{cssxref("::scroll-marker-group")}}
  - {{cssxref(":target-current")}}

- [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module
  - {{CSSXref(":host")}}
  - {{cssxref(":host()")}}
  - {{cssxref(":host-context()")}}
  - {{cssxref("::slotted()")}}

- [CSS shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) module
  - {{CSSXref("::part")}}

- [CSS view transitions](/en-US/docs/Web/CSS/Guides/View_transitions) module
  - {{cssxref("::view-transition")}} {{Experimental_Inline}}
  - {{cssxref("::view-transition-image-pair()")}} {{Experimental_Inline}}
  - {{cssxref("::view-transition-group()")}} {{Experimental_Inline}}
  - {{cssxref("::view-transition-new()")}} {{Experimental_Inline}}
  - {{cssxref("::view-transition-old()")}} {{Experimental_Inline}}

- [CSS selectors](/en-US/docs/Web/CSS/Guides/Selectors)
  - [Attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors)
  - [Combinators](/en-US/docs/Web/CSS/Guides/Selectors/Selectors_and_combinators#combinators)
  - [Class selectors](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors)
  - [ID selectors](/en-US/docs/Web/CSS/Reference/Selectors/ID_selectors)
  - [Type selectors](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors)
  - [Pseudo-classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes)
  - [Universal selectors](/en-US/docs/Web/CSS/Reference/Selectors/Universal_selectors)

- [`placeholder`](/en-US/docs/Web/HTML/Reference/Elements/input#placeholder) attribute of the `<input>` element
- {{cssxref(":placeholder-shown")}} selector

- [CSS generated content](/en-US/docs/Web/CSS/Guides/Generated_content)
  - {{cssxref("content")}} property
  - {{cssxref("quotes")}} property

- [Text fragments](/en-US/docs/Web/URI/Reference/Fragment/Text_fragments)

- {{DOMXref("AnimationEvent.pseudoElement")}} property
- {{DOMXref("KeyframeEffect.pseudoElement")}} property
- {{DOMXref("TransitionEvent.pseudoElement")}} property

## Specifications

{{Specifications}}

## See also

- [List of pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements)
- [Specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity)
- [CSS selectors](/en-US/docs/Web/CSS/Guides/Selectors) module
- [CSS shadow-parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) module
- [CSS generated content](/en-US/docs/Web/CSS/Guides/Generated_content) module
- [CSS positioned layout](/en-US/docs/Web/CSS/Guides/Positioned_layout) module
- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API)