attr() CSS Function

Description

The attr() CSS function returns the value of a property. That means that you can define content in your html markup using any custom property and then fetch the value using attr(). It only works on the content property at the moment, but support for other properties are currently in the experimental stage.

Syntax

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

Values

• <attr-name>Is the name of an attribute on the HTML element referenced in the CSS.
• <type-or-unit>Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. The following keywords are valid: <string>, <color>, <url>, <integer>, <number>, <angle>, <time>, <deg>, and also CSS units like em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc
• <attr-fallback>The value that will be used if the attribute is absent or the browser cannot receive it.

Example

<p>The attr() Function</p> 

<a href="https://www.cssportal.com">CSSPortal</a>

a:before { 

    content: attr(href) " -> "; 

} 

a { 

    text-decoration: none; 

} 

Browser Support

Desktop
8	12	2	1	9	3.1
Tablets / Mobile
≤37	18	4	10.1	3.1	Yes