content

content supplies generated content for pseudo-elements such as ::before and ::after. It also has image-replacement uses on elements, with different syntax and support; it is not accurate to say it only applies to pseudo-elements.

Generate a decorative line

An empty string creates ::before without adding text. Its dimensions and background draw the accent. Without content, that pseudo-element would not be generated.

<p class="note">The message is ordinary HTML; the accent is CSS.</p>

.note {
  position: relative;
  padding: 1rem 1rem 1rem 1.5rem;
}
.note::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: #2563eb;
}

Inspect an attribute through generated content

The visible generated value comes from data-demo. It is supplemental inspection text; the actual paragraph states the important value too.

<p class="sample" data-demo="24px">The example gap is 24px.</p>

.sample::after {
  content: " [CSS inspection: " attr(data-demo) "]";
  color: #1d4ed8;
}

Values and defaults

The initial value is normal and the property is not inherited. Normal behaves like none for ::before/::after; none prevents those pseudo-elements from being generated. Quoted strings, counter()/counters(), open-quote/close-quote, images, and attr() can supply generated values. Multiple strings concatenate. Modern typed attr(), image replacement, slash-separated alternatives, and paged-media target functions have separate implementation status.

Common mistakes

Generated content is not inserted as ordinary DOM text. Its exposure to assistive technology varies; do not rely on it for essential labels, error messages, or instructions. Content:none on a normal element does not delete that element’s DOM descendants. An empty string can create a decorative box, while none does not.

Learn quotes, counter-reset, and counter-increment.

Sources and browser support

MDN: content describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.