🎯 CSS content Property

The content property in CSS is used to insert generated content into a page, usually with ::before and ::after pseudo-elements.

It allows you to add text, icons, images, counters, or attribute values without modifying the HTML structure.

The content property lets you insert virtual elements into the DOM visually using CSS only.

These elements are not part of the HTML code but appear in the browser.

p::before {
  content: "📘 Note: ";
}
                

➡️ Adds “📘 Note:” before every paragraph without changing HTML.

• Adding icons before text
• Adding quotes automatically
• Creating counters and numbered lists
• Displaying attribute values dynamically

String Example:

h1::after {
  content: " 🔥";
}
                

➡️ Adds emoji after headings.

Attribute Example:

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

➡️ Shows link URL next to anchor text.

Counter Example:

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

➡️ Automatically numbers list items.