The content property is used specifically with the ::before and ::after pseudo-elements to insert generated text, an empty string, or other content immediately before or after an element's actual content.

Syntax

selector::before {
  content: "text or ''";
}

Deep Dive Course

content has no effect on a regular, ordinary element — it's specifically read by the ::before and ::after pseudo-elements, which don't render at all unless content is explicitly set, even to an empty string, content: "", the classic technique used purely to trigger a pseudo-element's existence for styling purposes, like a decorative shape, without needing any actual generated text. content can also insert a literal string, reference an attribute's value with attr(name), or insert certain special characters and icons, and generated content inserted this way is not selectable as real text and isn't included in the page's actual DOM or accessible to screen readers the same way genuine content is, making it unsuitable for anything meaningfully informational.

1Understanding Content

💡

A ::before or ::after pseudo-element renders nothing at all unless content is explicitly set, even to an empty string — this is the single most common reason a pseudo-element you've styled doesn't appear to be working.

editor.html

.required::after {
  content: " *";
  color: red;
}

localhost:3000

2Practical Example

Here is a real-world application of Content showing how it is used in production CSS code.

editor.html

.icon-box::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: blue;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Content:

1. Always set content, even to an empty string content: "", on a ::before/::after pseudo-element you intend to actually render, since it won't appear without it

2. Use attr(data-something) within content to dynamically insert an HTML attribute's value into generated content

3. Avoid putting meaningfully informational content in a ::before/::after's content value, since it's not selectable text and isn't reliably accessible to screen readers — use it for purely decorative or presentational purposes instead

⚠️

Tip: A ::before or ::after pseudo-element renders nothing at all unless content is explicitly set, even to an empty string — this is the single most common reason a pseudo-element you've styled doesn't appear to be working.

editor.html

.required::after {
  content: " *";
  color: red;
}

localhost:3000

Examples

Example 01Basic Usage

.required::after {
  content: " *";
  color: red;
}

Example 02Advanced Example

.icon-box::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: blue;
}

Best Practices

Always set content, even to an empty string content: "", on a ::before/::after pseudo-element you intend to actually render, since it won't appear without it
Use attr(data-something) within content to dynamically insert an HTML attribute's value into generated content
Avoid putting meaningfully informational content in a ::before/::after's content value, since it's not selectable text and isn't reliably accessible to screen readers — use it for purely decorative or presentational purposes instead

Interview Question

Why does a ::before pseudo-element render nothing at all if the content property is omitted, even if width, height, and background are all explicitly set on it?▼

Hint: Think about whether ::before/::after pseudo-elements exist and render by default the way a regular element does, or whether their very existence depends on something specific.

Unlike a regular HTML element, which exists in the DOM and renders by default regardless of its content, a ::before or ::after pseudo-element doesn't exist at all unless the content property gives it something, however minimal, to actually generate — content is effectively the switch that creates the pseudo-element's box in the first place, and without it being set to at least an empty string, the pseudo-element simply isn't generated, meaning none of its other properties, width, height, background, or anything else, have anything to actually apply to, since there's no box there for them to style. Setting content: "" specifically creates an empty, contentless pseudo-element box that still fully exists and can be styled and sized like any other element, which is exactly the well-known technique used to generate purely decorative shapes, icons, or visual flourishes via ::before/::after without needing any actual generated text.

Exercises

MediumPractice using Content in a real scenario.

View Solution

.required::after {
  content: " *";
  color: red;
}

Frequently Asked Questions

Why does a ::before pseudo-element render nothing at all if the content property is omitted, even if width, height, and background are all explicitly set on it?▼

Related Functions

Class-SelectorsBox-sizingBorders