🧩 CSS content Property — Complete Tutorial

🌐 What Is the content Property?

The content property is used with pseudo-elementslike ::before and ::after to insert generated content (text, icons, counters, quotes, images, etc.) into a webpage without modifying HTML.

>>“The content property lets CSS create visual content without touching the HTML.”

Note

✔ Works only with ::before and ::after
✔ Supports text, URLs, counters, quotes, attributes, and more
✔ Useful for UI badges, labels, icons, decorations, and accessibility

📦 Basic Syntax

Basic usage

selector::before {
  content: "Hello!";
}

Inserts the text “Hello!” before the element.

📌 1. Inserting Text Content

Text example

button::after {
  content: " →";
}

The arrow appears after every button.

📌 2. Empty Content

Empty string

.box::before {
  content: "";
  display: block;
  height: 4px;
  background: black;
}

Used for decorative lines, spacing, badges, overlays, etc.

📌 3. Using Icons or Emojis

Emoji example

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

📌 4. Using Attribute Values with attr()

attr() example

a::after {
  content: " (" attr(href) ")";
}

Shows the link’s URL automatically.

📌 5. Inserting Images

Image example

.icon::before {
  content: url('icon.png');
}

Note

⚠️ Use icons sparingly; prefer SVG for performance.

📌 6. Using Counters

Counters allow CSS to number items automatically.

Counter Example

ol {
  counter-reset: list;
}

li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

📌 7. Generated Quotes

Quotes example

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

📌 8. Combining Content Types

Combining

.alert::before {
  content: "⚠️ " attr(data-message) "!";
}

🎨 Styling Generated Content

Although generated content isn’t part of the DOM, you can style it like any other element.

Styling content

.badge::after {
  content: "NEW";
  background: red;
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  margin-left: 4px;
}

🧪 Practical Real-World Examples

1️⃣ Breadcrumb Separator

Breadcrumb

nav a + a::before {
  content: " / ";
}

2️⃣ Required Field Indicator

Required field marker

label[required]::after {
  content: " *";
  color: red;
}

3️⃣ Card Ribbon Decoration

Ribbon

.card::before {
  content: "🔥 HOT";
  position: absolute;
  top: 10px;
  left: -10px;
  background: orange;
  color: white;
  padding: 2px 6px;
  transform: rotate(-20deg);
}

4️⃣ Adding Icons to External Links

External link icon

a[href^="http"]::after {
  content: "🔗";
  margin-left: 4px;
}

🧠 Rules & Limitations

  • ❗ content works only in ::before & ::after
  • ❗ Cannot insert interactive elements like buttons
  • ❗ Generated content does NOT appear in the DOM
  • ❗ Does not accept dynamic JS expressions
  • ❗ display: none removes pseudo-element entirely

Note

✔ content can include text, quotes, counters, attributes, images, or be empty.
✔ Great for UI decorations and semantics.

🔥 Summary

The content property is a powerful tool for creating UI decorations, automatic numbering, dynamic labels, icons, and visual effects — all without writing extra HTML.

>>“Use content to enrich your interface while keeping HTML clean.”

Learn more →MDN Docs 📘