Pseudo-elements

::before

Creates a box as the first child of the element, before its actual content. It is only generated when content is set to something other than none or normal, and it is inline by default. Replaced elements such as <img> and <input> do not get one.

The single-colon form :before from CSS 2 still works everywhere and means the same thing.

.required::before { content: '* '; color: crimson; }

::after

Creates a box as the last child of the element, after its actual content. Like ::before, it needs a content value to appear, and replaced elements do not get one.

The single-colon form :after from CSS 2 still works everywhere and means the same thing.

a[target=_blank]::after { content: ' ↗' / ''; }

::marker

The bullet or number box of a list item, or of any element with display: list-item. Only a few properties apply to it, mainly color, the font properties, content, white-space, and animations and transitions.

li::marker { color: var(--accent); font-weight: bold; }

::first-line

The first formatted line of a block container, which changes as the text reflows. Only font, colour, background, text decoration, spacing and similar inline properties apply.

The single-colon form :first-line from CSS 2 still works and means the same thing.

::first-letter

The first letter, number or symbol on the first line of a block, together with any punctuation right before or after it. Use it for drop caps, often with initial-letter or a float.

The single-colon form :first-letter from CSS 2 still works and means the same thing.

article > p:first-of-type::first-letter { initial-letter: 3; }

::selection

The part of the document the user has selected, for example by dragging over text. Only color, background-color, text decorations, text-shadow and a few other painting properties apply.

::selection { background-color: #ffd21a; color: black; }

::target-text

The text a URL's text fragment points to, such as a link ending in #:~:text=example. Browsers scroll to and highlight it; this lets you choose the highlight.

::spelling-error

Text the browser has flagged as misspelled, usually in an editable field. Use it to change how spelling mistakes are marked.

::grammar-error

Text the browser has flagged as grammatically incorrect.

::highlight()

Styles text ranges that a script has registered under a name with the CSS Custom Highlight API (CSS.highlights). It highlights text such as search results without adding wrapper elements to the DOM.

The argument is a highlight name (a <custom-ident>) or * for every highlight.

::highlight(search) { background-color: yellow; }

::search-text

Text matched by the browser's find-in-page feature. Use it to make find results match the page's colours.

::placeholder

The placeholder text of an <input> or <textarea>. To style the field itself while the placeholder shows, use :placeholder-shown.

::placeholder { color: #6b6b6b; opacity: 1; }

::file-selector-button

The button of an <input type="file"> that opens the file picker. It can be styled like any button.

::backdrop

A box drawn directly beneath an element in the top layer, covering the viewport. Modal dialogs, popovers and full-screen elements each get one. Use it to dim or blur the page behind.

dialog::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); }

::details-content

The part of a <details> element that is shown and hidden, that is everything except its <summary>. It is backed by a real element, so it takes most properties, which makes it possible to animate the opening and closing.

details::details-content { padding-inline: 1rem; border-inline-start: 2px solid; }

::picker()

The part of a form control that pops out of the page, such as the drop-down list of a <select>. It can be styled once the control and its picker opt in to the customisable appearance with appearance: base-select.

The only <form-control-identifier> is select.

select, ::picker(select) { appearance: base-select; }
::picker(select) { border-radius: 0.5rem; }

::picker-icon

The icon on a form control that shows it opens a picker, such as the arrow on a <select>. It is generated only when the control uses the customisable appearance.

::checkmark

The indicator that shows whether a checkbox, radio button or <option> is checked, such as the tick next to the selected option in a customisable <select>.

::field-content

The part of an input that holds the editable text, as distinct from the rest of the control.

::interest-button

A button the browser generates on an element with the interestfor attribute. Pressing it shows interest in the element, which gives touch and keyboard users a way to reveal what hovering would show. See :interest-source.

::cue, ::cue()

::cue styles the WebVTT captions and subtitles of a <video>. ::cue() styles only the parts of the cue text that match its selector, such as voice spans or :past and :future words. Only colour, font, background, text decoration, outline and a few text properties apply.

video::cue { background-color: rgb(0 0 0 / 0.8); font-size: 1.25em; }

::part()

From outside a component, styles elements inside its shadow tree that the component has exposed with the part attribute. With several names it matches elements that have all of them. User-action pseudo-classes such as :hover can follow it, but tree-structural ones cannot.

my-tabs::part(tab active) { border-block-end-color: currentColor; }
my-tabs::part(tab):hover { background: #eee; }

::slotted()

In a shadow tree's stylesheet, styles light-DOM elements that have been assigned to a <slot> and match the compound selector given. It reaches only the slotted elements themselves, not their descendants. Styles from the page outside win over ::slotted() rules.

slot[name=title]::slotted(*) { margin: 0; }

::scroll-marker-group

A box generated before or after a scroll container whose scroll-marker-group property is not none. It holds the container's ::scroll-marker boxes and can be laid out and styled like any other box.

::scroll-marker

A marker generated for an item inside a scroll container, placed in the container's ::scroll-marker-group. It appears when its content is not none; activating it scrolls its item into view, and the marker for the item in view matches :target-current.

.carousel { overflow-x: auto; scroll-marker-group: after; }
.carousel > li::scroll-marker { content: ''; inline-size: 0.75rem; aspect-ratio: 1; border: 1px solid; border-radius: 50%; }
.carousel > li::scroll-marker:target-current { background: currentColor; }

::scroll-button()

A button generated on a scroll container that scrolls it by about a page in the given direction. It appears when its content is not none, and is disabled when the container cannot scroll further that way. * selects all of a container's scroll buttons.

The supported directions are up, down, left, right, block-start, block-end, inline-start and inline-end.

.carousel::scroll-button(inline-start) { content: '◀' / 'Previous'; }
.carousel::scroll-button(inline-end) { content: '▶' / 'Next'; }

::column

Each column of a multi-column container. It only takes a few properties; its main use is to give every column its own scroll marker with ::column::scroll-marker, so a paged multi-column layout gets one dot per page.

::view-transition

The root of the view transition tree: an overlay above the whole page that contains every transition group.

::view-transition-group()

One for each captured name. By default it animates its size and position from the old state to the new one. Set animation-duration or animation-timing-function here to change the timing for that element.

::view-transition-group(*) { animation-duration: 0.4s; }

::view-transition-group-children()

A container for nested transition groups, created when the view-transition-group property places groups inside another element's group. It is sized like its parent group, so nested groups can be clipped or transformed with it.

::view-transition-image-pair()

The child of a transition group that holds its old and new snapshots. It isolates them so the two images blend only with each other during the cross-fade.

::view-transition-old(), ::view-transition-new()

Snapshots of the element before and after the change, drawn like replaced elements. By default the old one fades out and the new one fades in; replace their animation to slide, scale or wipe instead. Each is left out if there is no old or new state to show.

::view-transition-old(root) { animation: 0.3s ease-in both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }