CSS content Property

CSS content Property

The content property in CSS is used to insert generated content before or after an element. It is mainly used with the ::before and ::after pseudo-elements.

1. Syntax

selector::before,
selector::after {
  content: value;
}

Value	Description
"" (empty string)	Inserts an empty content.
"text"	Inserts specified text.
url("image.png")	Inserts an image.
attr(attribute-name)	Inserts an attribute value.
counter(name)	Inserts a counter.
none	Removes content.

2. Example – Adding Text Before an Element

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

<h1>Hot News</h1>

✅ Displays: 🔥 Hot News

3. Example – Adding Icons After a Link

a::after {
  content: " 🔗";
}

<a href="#">Read More</a>

✅ Displays: Read More 🔗

4. Example – Displaying an Image Using content

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

✅ Inserts an image before the <div> content.

5. Example – Using attr() to Display Attributes

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

<a href="https://example.com">Visit</a>

✅ Displays: Visit (https://example.com)

6. Example – Using counter() for Auto Numbering

h2 {
  counter-increment: section;
}

h2::before {
  content: "Section " counter(section) ": ";
}

✅ Auto-numbers sections dynamically.

7. Best Practices

✔ Use ::before & ::after for decorative content (icons, labels, effects).
✔ Avoid using content for essential content (not accessible by screen readers).
✔ Combine with counter-increment for auto-numbering.