Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

attr() (content only)

The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.

Syntax and cascade

Overview

The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
attr
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

linkurldisplay

CSS linkURLdisplay demo.

PreviewFullscreen

Tooltip

CSS tooltip demo.

PreviewFullscreen

Dataattributelabel

CSS Dataattributelabel demo.

PreviewFullscreen

Use cases

  • Using attr() (content only)

    The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features