CSS content

The content property inserts generated content. It is most often used with ::before and ::after, and it can insert text, counters, images or attribute values.

Syntax

content: normal;
content: "New";
content: attr(data-label);
content: counter(section);

Text example

.badge::before { content: "New"; }

Result:

New Release notes

Counter example

ol { counter-reset: step; }
li::before {
  counter-increment: step;
  content: counter(step) ". ";
}

Common mistake

content does not insert meaningful document text for accessibility or SEO. Use HTML for real content and generated content for decoration, labels or repeated visual markers.