CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS @charset Rule CSS Functions (Functions)

CSS attr() function

CSS expression attr() is used to get the value of a certain HTML attribute of the selected element and use it in its style. It can also be used for pseudo-elements, where the attribute value is taken from the element that the pseudo-element is attached to. The attr() expression can be used with any CSS property.

CSS function

Online Example

The following example inserts content after each link:

Example

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>
<body>
<p><a href="//www.oldtoolbag.com">Basic Tutorial</a></p>
<p><a href="//www.oldtoolbag.com/html/">HTML Tutorial</a></p>
<p><strong>Note:</strong>IE8　The attr() function needs to declare !DOCTYPE to be supported.</p>
</body>
</html>

Test and see ‹/›

Definition and usage

The attr() function returns the attribute value of the selected element.

Supported version: CSS2

Browser compatibility

The numbers in the table indicate the first browser version number that supports this function.

function
attr()	2.0	8.0	1.0	3.1	9.0

Note: IE8 The attr() function needs to declare !DOCTYPE to be supported.

CSS syntax

Syntax: attr(attribute-name<type-or-unit>?[,<fallback>]?())

Value	Description
attribute-name	Must. The attribute name of the HTML element.

CSS function

CSS @charset Rule CSS Functions (Functions)