CSS Pseudo‑elements

What Are Pseudo‑elements?

Pseudo‑elements let you style specific parts of an elementrather than the whole element.

  • They start with a double colon (::).
  • You may sometimes see them written with a single colon (:), but that’s only for backward compatibility.
  • Always prefer the double colon syntax to distinguish them from pseudo‑classes.

Common Pseudo‑elements

Pseudo Elements
Pseudo‑elementPurpose
::afterCreates a pseudo‑element after the element.
::beforeCreates a pseudo‑element before the element.
::first-letter Styles the first letter of a block of text.
::first-lineStyles the first line of a block of text.
::selectionStyles text selected by the user.

Typography Examples

Make the first line of a paragraph larger:

Code Block Loading...

Make the first letter bold:

Code Block Loading...

Content Insertion with ::before and ::after

These pseudo‑elements are especially powerful because they can insert content using the content property.

Examples:

Code Block Loading...

This is often used for icons, decorative text, or helper labels without modifying the HTML.

Example

Code Block Loading...

Key Takeaways

  • Use ::first-line and ::first-letter for typographic effects.
  • Use ::before and ::after with content to insert icons or text.
  • Use ::selection to customize highlight colors when users select text.
  • Always prefer double colons (::) for pseudo‑elements.