CSS content Property

What You’ll Learn

The content property inserts generated content into ::before and ::after pseudo-elements — no extra HTML required.

Definition and Usage

The content CSS property is used with the ::before and ::after pseudo-elements to insert generated content into an element. It is particularly useful for adding decorative content or presentational annotations without altering the HTML markup.

Common uses include labels like “Note:”, icons before list items, external-link arrows after anchors, quote marks, and counter numbers. Remember: essential information should stay in HTML for accessibility; use content for decoration and enhancement.

📝 Syntax

The syntax for content is flexible — it can include text, images, counters, and attribute values:

selector::before {
  content: "text" | url(image) | counter(name) | attr(attribute) | open-quote | close-quote | normal | none;
}

Basic Example

p::before {
  content: "Note: ";
  font-weight: bold;
  color: red;
}

Syntax Rules

• The initial value is normal — no generated content appears.
• Only works on pseudo-elements like ::before, ::after, and ::marker.
• Text strings must be wrapped in quotes: content: "Hello";.
• Combine values: content: "Step " counter(step);.
• Use content: none; to suppress default marker or quote content.

💎 Property Values

The content property accepts strings, functions, and keyword values.

Examples Gallery

Try a text prefix, attr() label, decorative icon, and external-link arrow with ::after.

<style>
  p::before {
    content: "Note: ";
    font-weight: bold;
    color: red;
  }
</style>

<p>This is an important message.</p>

.tag::before {
  content: attr(data-label) ": ";
  font-weight: 600;
  color: #2563eb;
}

.custom-list li::before {
  content: "★ ";
  color: #f59e0b;
}

a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: #64748b;
}

💡 Best Practices