The following CSS functions allow us to declare many custom values for various results. Let's check them out.


The attr() CSS function allows us to target the value of any HTML attribute and use in CSS, and it looks like this:



The term attr is the abbreviation of the word attribute. This CSS function targets an HTML attribute and uses its value to accomplish different things via CSS.

In CSS, the attr() function is most commonly used with the content property together with the :after CSS pseudo-element to inject content into the document, but in reality the attr() function can be used with any other CSS property.

In HTML, it's very common to use the attr() CSS function to target the HTML5 data- or the href attributes. ...

Get Web Developer's Reference Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.