CSS Pseudo-elements

Style parts of elements with ::before, ::after, ::first-line, ::first-letter, and ::placeholder.

Overview

Pseudo-elements target specific parts of an element or insert generated content. They use double-colon syntax: `selector::pseudo-element { }`. The most important pseudo-elements: - `::before` inserts generated content before the element's actual content - `::after` inserts generated content after the element's actual content - `::first-line` styles only the first line of a text block - `::first-letter` styles only the first letter (drop-cap effect) - `::placeholder` styles the placeholder text of form inputs - `::selection` styles text the user has highlighted - `::marker` styles list item markers (bullets, numbers) **::before and ::after** are the most versatile. They require `content: ""` (even if empty) and are styled like block/inline elements. They are commonly used for decorative shapes, icons, overlays, and the clearfix hack.

Key Points

•::before and ::after require content: "" to render (empty string is fine)
•::before/::after are inline by default add display: block for box model control
•::placeholder styles the grayed placeholder text in form inputs
•::selection styles user-selected text
•::first-letter enables drop-cap typography effects
•Pseudo-elements do not appear in the DOM cannot be selected by JavaScript

Examples

::before and ::after for decorative elements

/* Add a decorative icon before nav links */
nav a::before {
  content: "→ ";
  color: royalblue;
}

/* Clearfix using ::after */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Decorative underline using ::after */
h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: royalblue;
  margin-top: 8px;
}

::placeholder and ::selection

input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

/* Style selected/highlighted text */
::selection {
  background: #dbeafe;
  color: #1e40af;
}

::first-letter drop cap

article p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
  color: #2563eb;
}

Classic newspaper-style drop cap. The first letter of the first paragraph is enlarged and floated.

Common Mistakes

Forgetting content: "" on ::before or ::after the pseudo-element will not render
Confusing pseudo-elements (::) with pseudo-classes (:) easy typo to miss
Putting meaningful content in ::before/::after screen readers may ignore it

Note

Use ::before and ::after for purely decorative content. For content that needs to be accessible or selectable, use real HTML elements. Pseudo-element content is not in the DOM and may be ignored by assistive technologies.

CSS Pseudo-elements

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is required for ::before and ::after to render on the page?