CSS Pseudo-elements

CSS pseudo-elements represent a specific part of an element or generated content that can be styled without adding another HTML element to the document.

Pseudo-elements are generally written with two colons (::) followed by the pseudo-element name. Common examples include ::before, ::after, ::first-letter, ::first-line, and ::selection.

Pseudo-element Syntax

A pseudo-element is added to a selector using two colons followed by the pseudo-element name.

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

For example, the following selector targets the first letter of every <p> element.

p::first-letter {
  font-size: 2em;
}

The double-colon syntax distinguishes pseudo-elements from pseudo-classes, which normally use a single colon.

The ::before Pseudo-element

The ::before pseudo-element creates a generated box before an element's content. The content property is commonly used to provide the generated content.

.note::before {
  content: "Note: ";
  font-weight: bold;
}

With the following HTML, the browser displays Note: before the paragraph's existing content.

<p class="note">Read this information carefully.</p>

Generated content should generally be used for presentation rather than essential information that users must be able to access independently of the CSS.

The ::after Pseudo-element

The ::after pseudo-element creates a generated box after an element's content.

.external::after {
  content: " ↗";
}

This example adds a visual symbol after elements with the external class without adding the symbol directly to the HTML content.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element selects the first letter of the first formatted line of a block container, allowing it to receive special styling.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

This technique can be used to create effects such as an enlarged opening letter at the beginning of a paragraph.

The ::first-line Pseudo-element

The ::first-line pseudo-element selects the first formatted line of a block container.

p::first-line {
  font-weight: bold;
}

The amount of text included in the first line depends on factors such as the element's width, font size, and viewport size. If the layout changes, the text matched by ::first-line can change as well.

The ::selection Pseudo-element

The ::selection pseudo-element styles the portion of text that a user has highlighted or selected.

::selection {
  background-color: #0088cc;
  color: white;
}

When the user selects text on the page, the selected text uses the specified foreground and background colors.

Only certain CSS properties apply to ::selection, so it should be used for simple selection styling rather than general element styling.

Pseudo-elements Example

The following example demonstrates several commonly used pseudo-elements.

<style>
.note::before {
  content: "Note: ";
  font-weight: bold;
}
.external::after {
  content: " ↗";
}
.introduction::first-letter {
  color: #0088cc;
  font-size: 2em;
  font-weight: bold;
}
::selection {
  background-color: #0088cc;
  color: white;
}
</style>

<p class="note">Pseudo-elements can generate presentational content.</p>
<p><a href="#" class="external">Example Link</a></p>
<p class="introduction">Pseudo-elements can also style specific portions of an element's content.</p>
<p>Select some of this text to see the selection style.</p>

Play in Editor

The example generates text before the note, adds a symbol after the link, styles the first letter of the introduction, and changes the appearance of selected text.