A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). 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; }
Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
selector::pseudo-element { property: value; }
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.
Pseudo-elements defined by a set of CSS specifications include the following:
A
B
C
F
G
::grammar-error Experimental
M
P
S
::selection::slotted()::spelling-error Experimental
T
::target-text Experimental
| Specification |
|---|
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # pseudo-element-selectors |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements