<pre class="brush: css notranslate"><code><span class="token comment">/ The first line of every &lt;p&gt; element. /</span> <span class="token selector">p::first-line</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

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

B

C

F

G

M

P

S

T

Specifications

See also

Last modified: Feb 22, 2022, by MDN contributors