content

Definition

The content CSS property is used with pseudo-elements (::before and ::after) to generate content in an element. It can hold counters, strings, images or nothing. For example, content: 'Hello'; will insert the word “Hello” before or after the content of an element, depending on whether it’s used with ::before or ::after.

Syntax

.badge::before {
  content: "New";
  margin-right: 0.5rem;
}

Values

Strings in quotes, counters via counter()/counters(), images via url(), or the special keywords (none, open-quote, etc.).
Only applies to pseudo-elements (::before, ::after, ::marker, etc.).

Practical Examples

.badge::before {
  content: "New";
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 9999px;
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  font-size: 0.75rem;
  font-weight: 600;
}

Insert decorative or informational text via pseudo-elements without altering the DOM.

HTML Announcements

Code

<style>
.badge-demo::before {
  content: 'New';
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: rgba(14,165,233,0.12);
  color: #0ea5e9;
  font-size: 0.75rem;
  font-weight: 600;
}
</style>
<span class="badge-demo inline-flex items-center rounded-full border border-slate-200 px-4 py-2 text-sm text-slate-700">Announcements</span>

Tips & Best Practices

Restrict content to pseudo-elements—using it on normal elements is ignored.
Leverage CSS variables to keep inserted labels consistent.

Accessibility & UX Notes

Inserted content should be supplemental; for important information, keep it in the DOM so screen readers announce it.

Browser Support

Supported in modern browsers. Internet Explorer needs :before/:after syntax.

counter() functions
quotes property
::marker for list bullets.