Alt text for generated content
The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
Overview
The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.content.alt_text | 77 | 79 | 128 | 17.4 | 77 | 17.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.icon::before {
content: url('star.svg') / 'Favorites';
}
.decorative::before {
content: url('divider.svg') / '';
}Live demo
Use cases
Maintainable CSS architecture
Use Alt text for generated content to make stylesheet intent clearer in larger codebases and shared design systems.
Fallback management
Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.
Cautions
- Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
- Keep rules scoped and documented when they affect many selectors or entire stylesheets.
Accessibility
- Global CSS controls should not accidentally remove focus, contrast, or structural cues.
- Fallback paths should remain readable and functional, especially for assistive-technology users.
Related links
Powered by web-features