What You’ll Learn

The ::before pseudo-element lets you insert content before an element’s real content using only CSS. It is ideal for icons, labels, quotation marks, and other decorative prefixes without changing your HTML.

Introduction

The ::before selector in CSS is a pseudo-element used to insert content before an element’s actual content. It creates a virtual child that appears at the start of the selected element.

This is commonly used for decorative symbols before headings, “Note:” labels before paragraphs, link icons, opening quotation marks, and custom list markers — all without adding extra HTML tags.

Definition and Usage

Every ::before rule must include the content property. The value can be text in quotes, an empty string "" for shape-based decorations, Unicode symbols like ★, or a function like attr(data-label).

By default, generated content is inline and flows on the same line as the element’s text. Use display: block when you need a prefix that sits on its own row.

📝 Syntax

The signature of the ::before pseudo-element is:

element::before {
  content: " ";
  /* CSS properties */
}

Basic Example

h1::before {
  content: "★ ";
  color: #eab308;
  font-size: 1.1em;
}

p.note::before {
  content: "Note: ";
  font-weight: 700;
  color: #dc2626;
}

Syntax Rules

• Use double colon ::before for pseudo-elements (modern standard).
• The content property is required.
• Generated content is decorative by default — do not put essential information only in ::before.
• Style it like any element: color, background, padding, border, etc.
• Does not apply meaningfully to void elements like img and input.

Related Selectors & Properties

• ::after — inserts content after the element
• content — CSS property that defines generated text or empty placeholders
• ::marker — styles list item bullets/numbers
• content property — full reference for values like attr() and url()

When to Use ::before

::before is best for presentational prefixes:

• Heading icons — Add a star, arrow, or emoji before titles without an extra <span>.
• Callout labels — Prefix paragraphs with “Note:” or “Tip:” for visual emphasis.
• Link markers — Prepend 🔗 or other icons before anchor text.
• Quotation marks — Add opening quotes before blockquotes.
• Custom bullets — Replace default list markers with styled prefixes on li::before.

Examples Gallery

Try ::before with decorative symbols, generated text prefixes, link icons, and quotation marks.

h1::before {
  content: "★ ";
  color: #eab308;
  font-size: 1.1em;
}

p.note::before {
  content: "Note: ";
  font-weight: 700;
  color: #dc2626;
}

a::before {
  content: "🔗 ";
  font-size: 0.9em;
}

a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}

blockquote::before {
  content: "\201C";
  color: #94a3b8;
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.25em;
  margin-right: 0.15rem;
}

blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid #cbd5e1;
  color: #475569;
  font-style: italic;
}

⚠️ Common Pitfalls

• Forgetting content — Without it, ::before does not render at all.
• Void elements — ::before does not work on img, input, br, and similar tags. Wrap them if needed.
• Essential information — Do not put critical text only in generated content; screen readers may skip it.
• Inline by default — For block-level decorations, set display: block or inline-block.
• Single vs double colon — Prefer ::before to distinguish pseudo-elements from pseudo-classes.

♿ Accessibility

• Decorative only — Use ::before for visuals that do not convey unique meaning.
• Keep real text in HTML — Important labels, errors, and instructions belong in the document markup.
• Screen readers — Generated content is often ignored; do not rely on it for essential context.
• Link icons — Ensure the link text itself still makes sense without the decorative icon.

💡 Best Practices