CSS attr() Function

The attr function retrieves an element's attribute value.

The returned value is commonly used as a content property value.

Example

#

This attr function retrieves style values.
These values are then displayed after each item in brackets.

  1. Designers
  2. Developers
  3. Managers
<style>
  .list li:after {
    content: " (" attr(style) ")";
  }
</style>

<ol class="list">
  <li style="color:red">Designers</li>
  <li style="color:green">Developers</li>
  <li style="color:blue">Managers</li>
</ol>

Syntax

attr( attribute-name );

Values

#

Value Description
attribute-name The attribute for which the value should be retrieved.

Browser support

This table shows when attr support started for each browser.

Chrome
2.0 May 2009
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
9.0 Jun 2006
Safari
3.1 Mar 2008

You may also like

Guides