<attr>

Retrieves the value of an attribute from an element to use directly in CSS. It is most frequently used with the content property in pseudo-elements.

/* Usage Example */
a[data-tooltip]::before {
  /* Displays the text from the data-tooltip attribute */
  content: attr(data-tooltip);
  position: absolute;
}

This comparison shows how <attr> works in a real project. View snippet →

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

2+
1+
3.1+
12+
Interop 2026 focus area ? Learn more →
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC