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:
attr(href);
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. The attr()
function can be used to target any HTML attribute.
In CSS3 the syntax of the attr()
CSS function is a bit different. It accepts not only an attribute value but it also accepts two more arguments, a type-or-unit argument and an attribute...