Pseudo-elements

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Style the inner parts of an element

Pseudo-element lets you style a fake little "part" of an element. ::before and ::after are commonly used to add decoration before or after the content. Icons, badges, decorative lines, quote marks, and similar touches can all be done in CSS without adding any extra HTML.

css

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 8px;
  background: linear-gradient(90deg, cyan, magenta);
}

.note::before {
  content: "💡 ";
}

You should see

A gradient line will appear beneath the section title. A light bulb emoji will appear before the note text.

Tip

Pseudo-elements are great for decorative content, but you shouldn't put important text inside CSS content. Keep it in the HTML for SEO and accessibility.