Display HTML attribute values in CSS with attr ()

The attr () feature has already appeared in the CSS 2.1 standard, but it is now popular. It provides an ingenious way to use the attributes on HTML tags in CSS, and in many cases it saves you the process of needing JavaScript processing in the past.

To use this feature, you need to use three elements: one: Before or: After CSS pseudo-class style,. Content property, and a attr () expression with the name of the HTML attribute you want to use. For example, want to show

The value of the Data-prefix attribute on the title, you can write this:

H3:before {

Content:attr (Data-prefix) "";

}

This is a heading

Obviously, this example does not show how useful it is, just shows its basic usage. Let's try a more useful example, an excellent application of attr () is to display the page links when the user prints the page. To achieve this, you can write this:

@media Print {

A:after {

Content: "(Link to" attr (href)) ";

}

}

Visit Our home page

Once you know the technique, you'll be amazed at how much time it can bring to your work!