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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.