Login Join Us
CSS Reference 
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

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

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Feedback
Guides


On this page