Pseudo-element

A keyword added to a CSS selector that styles a specific part of an element, such as ::before or ::after, allowing you to insert content or style portions of an element.

Overview

Pseudo-elements allow you to style specific parts of an element or insert generated content without adding extra HTML elements. They use double colons (::) in modern CSS and enable decorative effects and content injection through CSS alone.

Example

css
/* Add content before */
.quote::before {
  content: '"';
  font-size: 2em;
}

/* Add content after */
.quote::after {
  content: '"';
}

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

Key Points

  • Uses double colon (::) in modern CSS
  • Creates virtual elements in the DOM
  • Common: ::before, ::after, ::first-letter, ::first-line
  • Requires 'content' property for ::before and ::after
  • Great for decorative elements without extra HTML

Learn More