offline version v3


284 of 298 menu

The attr function

The attr function allows you to get a value of an HTML tag attribute in CSS.

Syntax

selector { property: attr(name, type, value); }

Parameters

Parameter Description
name An attribute name of an element passed to CSS.
type The value type of a CSS property. The following keywords are allowed: string, color, url, integer, number, angle, time, deg, and CSS units like em, px, etc.
value A value to use if the attribute is not present or the browser cannot obtain it.

Example

Let's output in parentheses a link value of the href attribute after the link text:

<a href="http://google.com">link</a> a::after { content: ' (' attr(href) ')'; }

:

See also

  • the content property
    that allows you to add a text to elements
  • the before pseudoelement
    that makes an insert before a tag text
  • the after pseudoelement
    that makes an insert after a tag text
enru