What You’ll Learn

The ::after pseudo-element lets you insert content after an element’s real content using only CSS. It is ideal for decorative lines, icons, and visual extras without changing your HTML.

Introduction

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

This is commonly used for decorative lines under headings, icons after links, quotation marks, badges, and other presentational touches — all without adding extra HTML tags.

Definition and Usage

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

By default, generated content is inline. Use display: block when you need a line or box that sits on its own row, such as an underline bar below a heading.

📝 Syntax

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

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

Basic Example

h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background-color: #2563eb;
  margin-top: 0.5rem;
}

Syntax Rules

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

Related Selectors & Properties

• ::before — inserts content before 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 ::after

::after is best for presentational enhancements:

• Heading underlines — Add a colored bar below titles without an extra <span>.
• Link indicators — Append ↗ or PDF icons to external links.
• Form hints — Show a decorative asterisk on required labels (with proper HTML semantics too).
• Quotes and flourishes — Add closing quotation marks to blockquotes.
• Clearfix patterns — Historical layout technique using content: "" and display: table.

Examples Gallery

Try ::after with decorative lines, generated text, link icons, and form markers.

h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background-color: #2563eb;
  margin-top: 10px;
}

p::after {
  content: " - Thanks for reading!";
  color: #64748b;
  font-style: italic;
}

a.external::after {
  content: " ↗";
  font-size: 0.85em;
  color: #2563eb;
}

label.required::after {
  content: " *";
  color: #dc2626;
  font-weight: 700;
}

⚠️ Common Pitfalls

• Forgetting content — Without it, ::after does not render at all.
• Void elements — ::after 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 ::after to distinguish pseudo-elements from pseudo-classes.

♿ Accessibility

• Decorative only — Use ::after for visuals that do not convey unique meaning.
• Keep real text in HTML — Important labels, errors, and instructions belong in the document markup.
• Required fields — Pair decorative asterisks with required and accessible label text.
• External link icons — Ensure the link text itself still makes sense without the icon.

💡 Best Practices