CSS content プロパティ

What Is the CSS content Property?

The CSS content property inserts generated content into a document via the ::before and ::after pseudo-elements. One of its most powerful uses is inserting Unicode characters using the \XXXXXX hex notation, allowing decorative symbols, icons, arrows, and glyphs to be added purely through stylesheets — without modifying the HTML.

The content property only applies to ::before and ::after pseudo-elements (and a few other generated content contexts like ::marker).

Unicode Notation in CSS

In CSS string values, Unicode escape sequences use a backslash followed by one to six hexadecimal digits:

/* These all insert the CHECK MARK ✓ (U+2713) */
.done::before {
  content: "\2713";        /* 4-digit hex */
  content: "\002713";      /* 6-digit hex */
  content: "✓";           /* direct UTF-8 character */
}

CSS Unicode escapes are terminated by: the end of the hex sequence (max 6 digits), an optional whitespace character (which is consumed and not displayed), or any non-hex character.

/* Terminating space is consumed — not rendered */
.icon::before {
  content: "\2713 Check";  /* renders: ✓Check (space consumed) */
}

/* No terminating space needed when followed by non-hex */
.icon::before {
  content: "\2713!";       /* renders: ✓! */
}

Common Use Cases

/* Quotation marks */
q::before { content: "\201C"; }   /* " (LEFT DOUBLE QUOTATION MARK) */
q::after  { content: "\201D"; }   /* " (RIGHT DOUBLE QUOTATION MARK) */

/* Arrows for navigation */
.next::after  { content: " \2192"; }  /* → */
.prev::before { content: "\2190 "; }  /* ← */

/* Decorative bullets */
.feature-list li::before {
  content: "\2022";  /* • BULLET */
  margin-right: 0.5em;
}

/* Warning icon */
.warning::before {
  content: "\26A0\FE0F";  /* ⚠️ (warning + emoji variation selector) */
}

/* External link indicator */
a[href^="http"]::after {
  content: " \2197";  /* ↗ NORTH EAST ARROW */
  font-size: 0.8em;
}

/* Counter combined with Unicode */
ol.custom {
  counter-reset: section;
}
ol.custom li::before {
  counter-increment: section;
  content: counter(section) "\FE0F\20E3";  /* Keycap emoji sequence */
}

Font Dependency

The inserted character renders using the element's computed font-family. If the font does not include a glyph for the specified code point, the browser falls back through the font stack. For full Unicode coverage, include a system emoji font or a comprehensive symbol font:

.icon::before {
  content: "\1F4A1";  /* 💡 LIGHT BULB */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

Accessibility Considerations

Content generated with the content property is read by most screen readers (unless alt is set to empty string). For decorative characters, suppress them:

/* Decorative only — hide from screen readers */
.separator::before {
  content: "\2022";
  speak: never;        /* CSS Speech module (limited support) */
  /* Or use aria-hidden="true" on the element itself */
}

/* Meaningful content — provide alt text (CSS4) */
.external::after {
  content: "\2197" / "external link";
}

Quick Facts