What are the uses of content and attr attributes in css3

The content attribute in CSS3 can fill in content in page elements through CSS, and can also implement string connection operations; content and attr can be used together to dynamically obtain content from elements

[Recommended course: CSS3 Tutorial】

The emergence of CSS3 has changed the function of style sheets. It becomes more and more powerful, and it also makes development easier and more convenient. Especially the new features that appeared in CSS3, such as transitions, animations, and transforms, etc. There is a feature here that is not so eye-catching, but it is very useful. It is the content and attr expressions, which can quietly under the page. Use CSS to generate content. Let's see how attr and content work together to produce magical effects.

Basic content usage

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

Example:

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

Please note that if you want the pseudo element: after to be positioned absolutely, you must set position: relative

content and attr are used together

If you do not want to put the content content in CSS If written in, you can use attr expressions to dynamically obtain content from page elements:

/* <div data-line="1"></div> */ 
div[data-line]:after { 
 content: attr(data-line); 
/* 属性名称上不要加引号！ */ }

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

String connection operation in content

This kind of string connection is very similar to conventional programming languages:

/* <div data-line="1"></div> */ 
div[data-line]:after
 { content: "[line " attr(data-line) "]"; }

In CSS3, you can complete things like String concatenation in JavaScript and attr's dynamic generation of page content are also very useful. We can use it with content to operate on many other elements and attributes of the page.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of What are the uses of content and attr attributes in css3. For more information, please follow other related articles on the PHP Chinese website!