CSS Function - attr()

Quiz

The attr() function in CSS is used for the retrieval of the selected element's attribute value and later use it in the stylesheet. The function attr() can also be used on the pseudo-elements, where the function returns the pseudo-element's originating element's attribute value.

The attr() function can be used with any CSS property, but the support for content property is complete, whereas for the type-or-unit parameter is not thorough.

Possible values

The function attr() can take the following value as parameter(s).

attribute-name value: lists the name of the attribute on the HTML element that is referenced in CSS.

Syntax

attr(<attribute-name>)

CSS attr() - Content Property

Following is an example of attr() function. It will return the value of the attribute of selected elements, in this case it is an anchor element (a).

<html>
<head>
<style>
   a:before {
      content: attr(href) " ** ";
   }
   
   a {
      text-decoration-line: underline;
      color: red;
   }
</style>
</head>
<body>
   <h2>The attr() Function</h2>
   <p>Insert ** before the anchor element</p>
   <a href="https://www.tutorialspoint.com">
      Tutorialspoint
   </a>
</body>
</html>

The above example is adding two asterisk marks before the href attribute of <a> element. It is used with the 'content' property along with pseudo-element ::before.

CSS attr() - Using "title" attribute

Following is an example of attr() function. It will return the value of the "title" attribute of an abbreviation.

<html>
<head>
<style>
   abbr[title]:after {
      content: " (" attr(title) ")";
      background-color: aquamarine;
      font-size: 1.2rem;
   }
</style>
</head>
<body>
   <h2>"title" attribute of abbreviation</h2>
   <abbr title="Hyper Text Markup Language">
      HTML
    </abbr>
</body>
</html>

CSS attr() - Using @media rule (Printed page)

Following is an example of attr() function, where a hyperlink is displayed on the printed version of the page. This is done using the @media rule. Have a look at the example:

<html>
<head>
<style>
   @media print {
      a[href]:after {
         content: " (" attr(href) ")";
      }
   }
</style>
</head>
<body>
   <h2>hyperlink on print media</h2>
   <p>Press Ctrl+P to print the page and see the url of the link</p>
   <a href="www.tutorialspoint.com" target="_blank" rel="no-follow">Tutorials point</a>
</body>
</html>

CSS attr() - Using Custom HTML5 Attribute

Following is an example of attr() function, where a custom attribute (sample-desc) is defined. Some value is passed to this attribute in a list. The same custom value is displayed and the list item where no value is passed to the custom property is provide, a blank is returned. Let us see the example:

<html>
<head>
<style>
   li:after {
      content: " (" attr(sample-desc) ")";
      background-color: bisque;
   }
</style>
</head>
<body>
   <h2>custom data attribute of HTML5</h2>
   <ul>
      <li sample-desc="Cascading Style Sheets">
        CSS
      </li>
      <li sample-desc="Object-oriented Programming Language">
        JavaScript
      </li>
      <li>
        HTML
      </li>
      <li sample-desc="Web Browser">
        Chrome
      </li>
      <li sample-desc="Open-source JS Library">
        React
      </li>
    </ul>
</body>
</html>

Print Page