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) '. ';
}