Tag content

The content property in CSS is used to insert generated content into the page — most often with the help of pseudo-elements like ::before and ::after. This allows you to add text, icons, images, or symbols to your HTML content without changing the HTML markup.

---

🧾 What is content?

The content property defines what is inserted into a document using pseudo-elements. It only works with:

• ::before
• ::after

It’s commonly used for decoration, labels, quotes, counters, or adding icons before or after elements.

---

🧬 Syntax

selector::before {
  content: <value>;
}

Acceptable values:

Value Type	Example	Description
Text string	"Hello"	Inserts literal text
Empty string	""	Useful for structure (e.g., for icons)
url()	url('image.png')	Inserts an image
attr()	attr(title)	Inserts attribute value of the element
counter()	counter(section)	Inserts a counter value
none	none	Prevents content from being generated
Unicode characters	"\2192"	Adds special symbols (e.g., arrows →)

---

🎯 Examples

1. Add text before a heading

h2::before {
  content: "🔹 ";
}

Adds a decorative bullet before every <h2> element.

---

2. Add a label after a button

button::after {
  content: " (click me)";
  font-size: 0.9em;
  color: gray;
}

This makes buttons more informative without touching HTML.

---

3. Use attr() to display an attribute

a::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
}

Displays the actual link URL after each anchor (<a>), useful for printing styles.

---

4. Add an icon with Unicode

li::before {
  content: "\2022"; /* Unicode bullet */
  margin-right: 0.5em;
  color: crimson;
}

Stylizes list items without using <ul>‘s default bullets.

---

⚠️ Limitations

• Only works with ::before and ::after.
• Does not apply to replaced elements (like <img> or <input>).
• You cannot interact with generated content via the DOM or JavaScript directly.
• Not ideal for essential content (use real HTML instead for accessibility).

---

✅ Browser Support

Fully supported across all modern browsers:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 8+

---

🛠️ Tips & Best Practices

• Use content for visual enhancements, not vital content.
• Combine with display: block or inline-block to style generated elements.
• For screen-reader-friendly designs, avoid putting important info in content.
• Use content: "" as a base when you just need styling or spacing from pseudo-elements.

---

🔚 Conclusion

The CSS content property is a powerful styling tool that helps you add decorative or dynamic content via pseudo-elements, without altering your HTML. It’s great for improving UI clarity, styling lists, or adding dynamic labels.

---