coderef

Alt text for generated contentBaseline · Newly available

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.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Jul 9, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–76Not supported
77+Supportedsince Sep 10, 2019
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27
MobileChrome Android
18–76Not supported
77+Supportedsince Sep 10, 2019
Current: 155
Firefox Android
4–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari iOS
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Jul 9, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using
@supports (content: initial) {
  /* styles that rely on content */
}

/* or in JavaScript */
if (CSS.supports("content", "initial")) {
  // use it
}

Specification