Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use attr () to display the value of HTML attribute in CSS. It is very detailed and has certain reference value. Friends who are interested must read it!

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 do this, you can write: CSS Code copies the content to the clipboard @ 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.

The above is all the content of the article "how to use attr () to display HTML attribute values in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.