Newly available Helpful when Alt text for generated content improves stylesheet organization, fallback behavior, or cascade control.

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.

Syntax and cascade

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

meaning. existsalternativetext

CSS meaning. existsalternativetext demo.

PreviewFullscreen

decorationuse(empty. alternative)

CSS decorationuse(empty. alternative) demo.

PreviewFullscreen

icon＋alternativetext

CSS icon＋alternativetext demo.

PreviewFullscreen

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