CSS Pseudo-element Reference Manual
- Previous Page CSS Pseudo-classes
- Next Page CSS Functions
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. |
- Previous Page CSS Pseudo-classes
- Next Page CSS Functions