SymbolFYI

CSS content Property

Web & HTML

Définition

A CSS property that inserts content before or after an element, commonly used with Unicode escape sequences (e.g., content: '\2713').

CSS content Property and Unicode

The CSS content property is used exclusively with the ::before and ::after pseudo-elements to insert generated content into the document. It supports Unicode characters through escape sequences, making it a common technique for adding symbols, icons, and decorative elements without modifying HTML.

Basic Syntax

/* Insert a Unicode character by name (direct) */
.checkmark::before {
  content: '✓';
}

/* Insert a Unicode character by escape sequence */
.checkmark::before {
  content: '\2713';  /* U+2713 CHECK MARK */
}

/* Insert text */
.quote::before {
  content: '\201C';  /* U+201C LEFT DOUBLE QUOTATION MARK */
}
.quote::after {
  content: '\201D';  /* U+201D RIGHT DOUBLE QUOTATION MARK */
}

CSS Unicode Escape Syntax

CSS escape sequences begin with a backslash followed by 1-6 hexadecimal digits. A trailing space is required if the next character is a valid hex digit, to prevent ambiguity:

/* 4-digit code point */
content: '\2603';    /* ☃ SNOWMAN */

/* 5-digit code point (emoji) */
content: '\1F600';   /* 😀 GRINNING FACE */

/* When followed by hex char, add a space */
content: '\0026 ';   /* & followed by space */
content: '\0026A';   /* Could be ambiguous: \0026 followed by A, or \0026A? */
content: '\0026 A';  /* Unambiguous: & followed by A */

Common Symbol Insertions

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

/* Required field marker */
.required-label::after {
  content: ' *';
  color: red;
}

/* List item bullets */
ul.custom li::before {
  content: '\25B8';  /* ▸ BLACK RIGHT-POINTING SMALL TRIANGLE */
  color: #0066cc;
  margin-right: 0.5em;
}

/* Quotation marks by language */
:lang(de) q::before { content: '\201E'; }  /* „ */
:lang(de) q::after  { content: '\201C'; }  /* “ */
:lang(fr) q::before { content: '\AB '; }   /* « with space */
:lang(fr) q::after  { content: ' \BB'; }   /* » with space */

Icon Fonts

Icon font systems like Font Awesome use the content property extensively, mapping private-use area (PUA) code points to glyph shapes:

.fa-check::before {
  font-family: 'Font Awesome 6 Free';
  content: '\f00c';  /* PUA code point mapped to checkmark glyph */
}

This approach uses Unicode's Private Use Area (U+E000 to U+F8FF) to avoid conflicts with standard characters.

Accessibility Limitations

Content inserted via ::before and ::after is not consistently announced by screen readers. Browser behavior varies:

Some screen readers announce CSS-generated content
Others skip it entirely
Behavior depends on the screen reader, browser, and operating system version

Critical rule: Never use the content property as the sole means of conveying important information. Always provide an accessible text equivalent in the HTML:

<!-- WRONG: symbol only in CSS, no HTML text -->
<button class="close-btn"></button>

<!-- CORRECT: accessible text in HTML, decorative symbol in CSS -->
<button class="close-btn">
  <span class="visually-hidden">Close dialog</span>
</button>

.close-btn::before {
  content: '\D7';  /* × MULTIPLICATION SIGN as visual close icon */
  aria-hidden: true;  /* Note: this has no effect in CSS */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

Counter and Other content Values

The content property also supports counters, attribute values, and alternate text:

/* Display attribute value */
a::after {
  content: ' (' attr(href) ')';
}

/* Counters for numbered lists */
counter-reset: section;
h2::before {
  counter-increment: section;
  content: counter(section) '. ';
}

Termes associés