CSS Pseudo-elements

What is a pseudo-element?

CSS pseudo-elements are used to set the style of the specified part of the element.

For example, it can be used for:

  • Set the style of the first letter or first line of the element
  • Insert content before or after the content of the element

Syntax

The syntax of pseudo-elements:

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

::first-line pseudo-element

::first-line Pseudo-elements are used to add special styles to the first line of the text.

The following example adds styles to the first line of all <p> elements:

Example

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

Try it yourself

Note:::first-line Pseudo-elements can only be applied to block-level elements.

The following properties apply to ::first-line Pseudo-element:

  • Font property
  • Color property
  • Background property
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Please noteDouble colon notation - ::first-line Contrast :first-line

In CSS3, double colons replace the single-colon notation of pseudo-elements. This is the W3C's attempt to distinguishPseudo-classAndPseudo-elementAttempt.

In CSS2 and CSS1, pseudo-classes and pseudo-elements both used single-colon syntax.

For backward compatibility, CSS2 and CSS1 pseudo-elements can accept single-colon syntax.

::first-letter pseudo-element

::first-letter Pseudo-elements are used to add special styles to the first letter of the text.

The following example sets the format of the first letter of the text for all <p> elements:

Example

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

Try it yourself

Note:::first-letter Pseudo-elements only apply to block-level elements.

The following properties apply to the ::first-letter pseudo-element:

  • Font property
  • Color property
  • Background property
  • Margin property
  • Padding property
  • Border property
  • text-decoration
  • vertical-align (only when "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS classes

Pseudo-elements can be combined with CSS classes:

Example

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Try it yourself

The above example will display the first letter of paragraphs with class="intro" in red and with a larger font.

Multiple pseudo-elements

You can also combine several pseudo-elements.

In the following example, the first letter of the paragraph will be red with a font size of xx-large. The rest of the first line will be blue and in small-caps. The rest of the paragraph will be in 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

::before Pseudo-elements can be used to insert some content before the element content.

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

Example

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

Try it yourself

CSS - ::after pseudo-element

::after Pseudo-elements can be used to insert some content after the element content.

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

Example

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

Try it yourself

CSS - ::selection pseudo-element

::selection pseudo-elements to match the user-selected element parts.

The following CSS properties can be applied to ::selection:

  • color
  • background
  • cursor
  • outline

The following example displays the selected text in red on a yellow background:

Example

::selection {
  color: red; 
  background: yellow;
}

Try it yourself

All CSS pseudo-elements

Selector Example Example description
::after p::after Insert content after each <p> element.
::before p::before Insert content before each <p> element.
::first-letter p::first-letter Select the first letter of each <p> element.
::first-line p::first-line Select the first line of each <p> element.
::selection p::selection Select the part of the element that the user has selected.

All CSS pseudo-classes

Selector Example Example description
:active a:active Select the active link.
:checked input:checked Select each checked <input> element.
:disabled input:disabled Select each disabled <input> element.
:empty p:empty Select each <p> element that does not have any child elements.
:enabled input:enabled Select each enabled <input> element.
:first-child p:first-child Select each <p> element that is the first child of its parent.
:first-of-type p:first-of-type Select each <p> element that is the first child of its parent.
:focus input:focus Select the <input> element that is focused.
:hover a:hover Select the link that the mouse is hovering over.
:in-range input:in-range Select <input> elements with values within a specified range.
:invalid input:invalid Select all <input> elements with invalid values.
:lang(language) p:lang(it) Select each <p> element whose 'lang' attribute value starts with 'it'.
:last-child p:last-child Select each <p> element that is the last child of its parent.
:last-of-type p:last-of-type Select each <p> element that is the last child of its parent.
:link a:link Select all unvisited links.
:not(selector) :not(p) Select each element that is not a <p> element.
:nth-child(n) p:nth-child(2) Select each <p> element that is the second child of its parent.
:nth-last-child(n) p:nth-last-child(2) Select each <p> element that is the second child of its parent, counting from the last child.
:nth-last-of-type(n) p:nth-last-of-type(2) Select each <p> element that is the second child of its parent, counting from the last child.
:nth-of-type(n) p:nth-of-type(2) Select each <p> element that is the second <p> element of its parent.
:only-of-type p:only-of-type Select each <p> element that is the only <p> element of its parent.
:only-child p:only-child Select <p> elements that are the only child of their parent.
:optional input:optional Select <input> elements without the 'required' attribute.
:out-of-range input:out-of-range Select <input> elements with values outside the specified range.
:read-only input:read-only Select <input> elements that have specified the 'readonly' attribute.
:read-write input:read-write Select <input> elements without the 'readonly' attribute.
:required input:required Select <input> elements that have specified the 'required' attribute.
:root root Select the root element of an element.
:target #news:target Select the currently active #news element (click on the URL containing the anchor name).
:valid input:valid Select all <input> elements with valid values.
:visited a:visited Select all visited links.