CSS Pseudo-element Reference
This complete CSS pseudo-element list organizes pseudo-elements by purpose, making it easier to find selectors for generated content, text, form controls, highlights, scrolling, media, shadow DOM, view transitions, and browser-specific interface parts.
Use the search box to find a pseudo-element by name or description, or switch to the alphabetical view when you already know the pseudo-element you are looking for. Each pseudo-element links to its complete CSS reference page.
Search CSS Pseudo-elements
Enter a pseudo-element name or a word describing what the pseudo-element does. The list will automatically display matching pseudo-elements.
No CSS pseudo-elements found.
Generated Content
Generated-content pseudo-elements represent content or interface parts generated in relation to an element.
::afterCreates a generated pseudo-element as the last child of the selected element.::beforeCreates a generated pseudo-element as the first child of the selected element.::checkmarkRepresents the checkmark displayed by certain customizable controls.::columnRepresents an individual column created by multi-column layout.::details-contentRepresents the expandable content of a details element.::markerRepresents the marker box of a list item.::postfixRepresents generated content placed after the primary content of certain controls.::prefixRepresents generated content placed before the primary content of certain controls.Text & Typography
Text and typography pseudo-elements select specific portions of rendered text.
::first-letterSelects the first letter of the first formatted line of a block container.::first-lineSelects the first formatted line of a block container.::placeholderRepresents placeholder text displayed by a form control.::search-textRepresents text matched by the browser's find-in-page feature.::target-textRepresents text targeted by a text fragment in the document URL.Highlight & Selection
Highlight pseudo-elements represent selected, highlighted, or browser-identified portions of document content.
::grammar-errorRepresents text identified by the browser as grammatically incorrect.::highlight()Represents a custom highlight registered for a range of document content.::selectionRepresents the portion of a document currently selected by the user.::spelling-errorRepresents text identified by the browser as incorrectly spelled.Forms & Controls
Form and control pseudo-elements represent specific interface parts of form controls and customizable widgets.
::backdropRepresents the backdrop rendered behind an element displayed in the top layer.::file-selector-buttonRepresents the button of a file input control.::picker()Represents the picker associated with a customizable form control.::picker-iconRepresents the picker icon displayed by certain form controls.Scrolling
Scrolling pseudo-elements represent controls and markers associated with scroll containers and scroll navigation.
::scroll-button()Represents a generated button used to scroll a scroll container in a specified direction.::scroll-markerRepresents a navigation marker associated with an element in a scroll container.::scroll-marker-groupRepresents the container that holds generated scroll markers.Shadow DOM
Shadow DOM pseudo-elements provide controlled access to elements and parts across shadow-tree boundaries.
::part()Selects an exposed part of an element's shadow tree.::slotted()Selects elements assigned to a slot in a shadow tree.Media
Media pseudo-elements represent cues and other rendered parts associated with timed media.
View Transitions
View-transition pseudo-elements represent the generated structure used to render and animate view transitions.
::view-transitionRepresents the root of the pseudo-element tree created for a view transition.::view-transition-group()Represents a view-transition group for the specified captured element.::view-transition-image-pair()Represents the container for the old and new snapshots of a view-transition element.::view-transition-new()Represents the new snapshot of a view-transition element.::view-transition-old()Represents the old snapshot of a view-transition element.Mozilla-specific
Mozilla-specific pseudo-elements use the ::-moz- prefix to style browser-specific interface parts in Firefox.
::-moz-color-swatchRepresents the color swatch of a color input in Firefox.::-moz-focus-innerRepresents an internal focus-related part of certain form controls in Firefox.::-moz-list-bulletRepresents a list-item bullet in Firefox.::-moz-list-numberRepresents a list-item number in Firefox.::-moz-meter-barRepresents the value bar of a meter element in Firefox.::-moz-progress-barRepresents the completed portion of a progress element in Firefox.::-moz-range-progressRepresents the filled portion of a range input track in Firefox.::-moz-range-thumbRepresents the thumb of a range input in Firefox.::-moz-range-trackRepresents the track of a range input in Firefox.WebKit-specific
WebKit-specific pseudo-elements use the ::-webkit- prefix to style browser-specific interface parts in WebKit and related browser engines.
::-webkit-inner-spin-buttonRepresents the spin button inside certain numeric form controls.::-webkit-meter-barRepresents the background bar of a meter element.::-webkit-meter-even-less-good-valueRepresents a meter value in its least favorable range.::-webkit-meter-inner-elementRepresents an internal part of a meter element.::-webkit-meter-optimum-valueRepresents a meter value within its optimum range.::-webkit-meter-suboptimum-valueRepresents a meter value within its suboptimal range.::-webkit-progress-barRepresents the background bar of a progress element.::-webkit-progress-inner-elementRepresents an internal part of a progress element.::-webkit-progress-valueRepresents the completed portion of a progress element.::-webkit-scrollbarRepresents a scrollbar in browsers supporting WebKit scrollbar styling.::-webkit-search-cancel-buttonRepresents the cancel button of a search input.::-webkit-search-results-buttonRepresents the search-results button associated with a search input.::-webkit-slider-runnable-trackRepresents the track of a range input.::-webkit-slider-thumbRepresents the thumb of a range input.CSS Pseudo-elements A-Z
All CSS pseudo-elements in this reference are shown alphabetically below.