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

Editor to share with you what is the use of the content and attr properties in css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The appearance of CSS3 makes the function of stylesheet more and more powerful, and it also makes the development more and more simple and convenient. In particular, CSS3 appears in the new features, such as transitions,animations, and transforms, etc., there is a feature, although not so eye-catching, but it is very useful, it is content and attr expressions, they can quietly use CSS at the bottom of the page to generate content, let's see how attr and content work together to produce magical results.

Basic content usage

The content feature allows programmers to use CSS to fill in content into page elements

Example:

.myDiv: after {content: "I am a static text produced using the * content* attribute";}

Note that if you want the pseudo element: after to be absolutely positioned, you must set position:relative on div.

Content and attr are used together

If you don't want to write content content dead in CSS, you can use attr expressions to dynamically retrieve content from page elements:

/ * /

Div [data-line]: after {

Content:attr (data-line)

/ * do not put quotation marks on the attribute name! * /}

The attr attribute is usually used in conjunction with the custom attribute data-, because although other traditional attributes can store values, they are usually not suitable for storing expressive text.

String concatenation operation in content

This string concatenation is very similar to a regular programming language:

/ * /

Div [data-line]: after

{content: "[line" attr (data-line) "];}

String concatenation like that in JavaScript can be done in CSS3, and it is also useful for attr to generate page content dynamically. We can use it to work with content to manipulate many other elements and attributes of the page.

The above is all the content of the article "what are the content and attr attributes in css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.