How to display the HTML attribute value with attr () in CSS

This article mainly introduces how to use attr () to display the HTML attribute value in CSS, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Display the HTML attribute value with attr () in CSS

The attr () function has been around for a long time in the CSS 2.1standard, but it is only now becoming popular. It provides an ingenious way to use attributes on HTML tags in CSS, which in many cases can help you avoid the process that requires Javascript processing in the past.

To use this feature, you need to use three elements: before or: after CSS pseudo-class style, .content attribute, and an attr () expression with the name of the HTML attribute you want to use. For example, to display the value of the data-prefix attribute on the title, you could write something like this:

H3:before {content: attr (data-prefix) "";} This is a heading

Obviously, this example doesn't show how useful it is, it just shows its basic usage. Let's try a more useful example. A great use of attr () is to display the page link when the user prints the page. To achieve this, you can write:

@ media print {a:after {content: "(link to" attr (href) ");}} Visit our home page

Once you know this technique, you will be surprised at the convenience it brings to your work many times!

Tip: in the new version of the CSS3 standard, the attr () function is extended to be used in a variety of CSS tags.

Thank you for reading this article carefully. I hope the article "how to display HTML attribute values in attr () in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!