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; } 

Pseudo-elements

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.

Syntax

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.

Index

Pseudo-elements defined by a set of CSS specifications include the following:

A

::after (:after)

B

::backdrop ::before (:before)

C

::cue ::cue-region

F

::first-letter (:first-letter) ::first-line (:first-line) ::file-selector-button

G

::grammar-error

M

::marker

P

::part() ::placeholder

S

::selection ::slotted() ::spelling-error

T

::target-text

Specifications

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # pseudo-element-selectors

Browser	Lowest Version	Support of
Internet Explorer	8.0	:pseudo-element
	9.0	:pseudo-element ::pseudo-element
Firefox (Gecko)	1.0 (1.0)	:pseudo-element
	1.0 (1.5)	:pseudo-element ::pseudo-element
Opera	4.0	:pseudo-element
	7.0	:pseudo-element ::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element ::pseudo-element

See also

Pseudo-classes

Last modified: Feb 22, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language