CSS Pseudo-element Reference Manual

CSS Pseudo-elements

CSS pseudo-elements are used to set the style of specific parts of an element.

For example, it can be used for:

  • Sets the style of the first letter or first line of the element.
  • Inserts content before or after the element content.
  • Sets the style of the list item marker.
  • Sets the style of the background view of the dialog.

The following table shows different pseudo-elements in CSS:

Pseudo-element Example Example Description
::after p::after Inserts content after the content of the specified element.
::backdrop dialog::backdrop Sets the style of the background view of the dialog or popup element.
::before p::before Inserts content before the content of the specified element.
::file-selector-button ::file-selector-button Selects the button of type <input type="file">.
::first-letter p::first-letter Selects the first letter of each <p> element.
::first-line p::first-line Selects the first line of each <p> element.
::grammar-error ::grammar-error Sets the style of text marked by the browser as grammatically incorrect.
::highlight() ::highlight(custom-name) Selects custom highlighting.
::marker ::marker The marker for selecting list items.
::placeholder input::placeholder Sets the style of the placeholder text of the <input> or <textarea> element.
::selection ::selection Sets the style of the selected text by the user.
::spelling-error ::spelling-error Sets the style of text marked by the browser as misspelled.
::view-transition ::view-transition Represents the root of the view transition overlay, containing all view transitions on the page.
::view-transition-group ::view-transition-group Represents a single view transition snapshot group.
::view-transition-image-pair ::view-transition-image-pair A container for the 'old' and 'new' view states of the view transition (before and after the transition).
::view-transition-new ::view-transition-new Represents the 'new' view state for view transitions.
::view-transition-old ::view-transition-old Represents the 'old' view state for view transitions.