CSS Pseudo-elements

CSS pseudo-elements are a special type of selector that can style specific parts of page elements without changing the HTML structure.

CSS pseudo-elements are used to add special effects to certain selectors.

Common CSS pseudo-elements include ::before, ::after, ::first-line, ::first-letter, etc.

Syntax

Pseudo-element syntax:

selector::pseudo-element {
    property: value;
}

CSS classes can also use pseudo-elements:

selector.class::pseudo-element {
    property: value;
}

:first-line pseudo-element

The "first-line" pseudo-element is used to apply special styling to the first line of text.

In the following example, the browser will format the first line of text in a p element according to the styles in the "first-line" pseudo-element:

Example

p:first-line { color:#ff0000; font-variant:small-caps; }

Try it Yourself »

Note:The "first-line" pseudo-element can only be used with block-level elements.

Note:The following properties can be applied to the "first-line" pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter Pseudo-element

The "first-letter" pseudo-element is used to apply special styling to the first letter of text:

Example

p:first-letter { color:#ff0000; font-size:xx-large; }

Try it Yourself »

Note:The "first-letter" pseudo-element can only be used with block-level elements.

Note:The following properties can be applied to the "first-letter" pseudo-element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Pseudo-elements and CSS classes

Pseudo-elements can be combined with CSS classes:

p.article:first-letter {color:#FF0000;}

<p class="article">文章段落</p>

The above example will make the first letter of all paragraphs with class "article" red.

Multiple Pseudo-elements

Multiple pseudo-elements can be used together.

In the following example, the first letter of a paragraph will be displayed in red, with a font size of xx-large. The rest of the text in the first line will be blue and displayed in small caps.

The rest of the text in the paragraph will be displayed with the default font size and color:

Example

p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }

Try it Yourself »

CSS - :before Pseudo-element

The ":before" pseudo-element can insert new content before the content of an element.

The following example inserts an image before each <h1> element:

Example

h1:before { content:url(smiley.gif); }

Try it Yourself »

CSS - :after Pseudo-element

The ":after" pseudo-element can insert new content after the content of an element.

The following example inserts an image after each <h1> element:

Example

h1:after { content:url(smiley.gif); }

Try it Yourself »

All CSS Pseudo-classes/Elements

Selector	Example	Example Description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	The state when the mouse is hovering over a link
:focus	input:focus	Selects an element that has focus after input
:first-letter	p:first-letter	Select the first letter of each <p> element.
:first-line	p:first-line	Selects the first line of each <p> element
:first-child	p:first-child	The selector matches <p> elements that are the first child of any element.
:before	p:before	Inserts content before each <p> element
:after	p:after	Inserts content after each <p> element
:lang(language)	p:lang(it)	Select a starting value for the lang attribute of the <p> element.

other extensions