attr() (content only)
Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental.
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1 | 3.1 | 18 | 2 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
a[href]::after {
content: ' (' attr(href) ')';
}
[data-tooltip]::before {
content: attr(data-tooltip);
}Live demo
Use cases
-
Using attr() (content only)
Note:
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.