Pseudo-elements

selector::pseudo-element {
  property: value;
}

For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use a single colon (:) in their notation. Note, browsers support single colon syntax for the original four pseudo-elements: ::before, ::after, ::first-line, and ::first-letter.

Pseudo-elements do not exist independently. The element of which a pseudo-element is a part is called its originating element. A pseudo-element must appear after all the other components in the complex or compound selector. The last element in the selector is the originating element of the pseudo-element. For example, you can select a paragraph's first line using p::first-line but not the first-line's children. So p::first-line > * is invalid.

A pseudo-element can be selected based on the current state of the originating element. For example, p:hover::first-line selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).

::first-line

The first line-box of the originating element.

::first-letter

The first letter, number, or symbol character on the first line of its originating element.

::cue

The WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks. The CSS pseudo-elements module also defines the ::postfix and ::prefix sub-pseudo elements. These are not yet supported by any browser.

Selects document sections based on content and document status, enabling those areas to be styled differently to indicate that status to the user.

::selection

The portion of a document that has been selected.

::target-text

The document's target element. The target element is identified using the URL's fragment identifier.

::spelling-error

A portion of text that the browser thinks is misspelled.

::grammar-error

A portion of text that the browser thinks is grammatically incorrect.

::highlight()

The elements in the highlight registry. It is used to create custom highlights.

These pseudo-elements behave like regular elements, fitting seamlessly within the box model. They act as a child element that can be styled directly within the originating element hierarchy.

::before

Creates a pseudo-element that is the first child of the selected element.

::after

Creates a pseudo-element that is the last child of the selected element.

::column

Each column fragment of a multi-column layout.

::marker

The automatically generated marker box of a list item.

::backdrop

The backdrop of the originating element rendered in the top layer.

::scroll-button()

Creates a button that can control the scrolling of the scroll container to which it is applied.

::scroll-marker

Creates a pseudo-element that is a scroll marker — a scroll target button for its originating element nested in a scroll-marker group.

::scroll-marker-group

Generates a container before or after a scroll container to contain the ::scroll-marker pseudo-elements generated on the element or its descendants.

These pseudo-elements are real elements that are not otherwise selectable.

::details-content

The expandable/collapsible contents of a <details> element.

::part()

Any element within a shadow tree that has a matching part attribute.

::slotted()

Any element placed into a slot inside an HTML template.

The pseudo-elements are related to form controls.

::checkmark

Targets the checkmark placed inside the currently-selected <option> element of a customizable select element to provide a visual indication of which one is selected.

::file-selector-button

The button of an <input> of type="file".

::picker()

The picker part of an element, for example the drop-down picker of a customizable select element.

::picker-icon

The picker icon inside form controls that have an icon associated with them. In the case of a customizable select element, it selects the arrow that points down when the select is closed.

::placeholder

The placeholder text in an input field.

Pseudo-elements defined by a set of CSS specifications include the following:

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue (and ::cue())

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

You can chain some pseudo-element selectors together to style pseudo-elements nested inside other pseudo-elements. The following nested pseudo-element combinations are supported:

• ::after
  • ::after::marker: Selects the ::marker pseudo-element of an ::after pseudo-element, when ::after is styled as a list item, with display: list-item.
• ::before
  • ::before::marker: Selects the ::marker pseudo-element of a ::before pseudo-element, when ::before is styled as a list item, with display: list-item.

Check out the individual pseudo-element reference pages for examples and browser compatibility information.

• CSS pseudo-element module
• Pseudo-classes
• CSS selectors module
• Learn: Pseudo-classes and pseudo-elements