Recommended course: CSS3 tutorial
The appearance of CSS3 makes the style sheet more and more powerful, and it also makes development easier and more convenient. Especially the new functions in CSS3, such as transition, animation, transformation, etc. There is a function that is not so eye-catching, but it is very useful. It is an expression of content and attr, and you can quietly use CSS to generate content at the bottom of the page. Let's see how attr and content work together to produce magical effects.
Basic content usage
Content attributes allow programmers to use CSS to fill content in page elements.
Example:
. MyDiv: After {content: "I am static text generated by using the *content* attribute"; } Note that if you want to locate the pseudo element: after absolutely, you must set the position: relative for div.
Content and attributes are used together.
If you don't want to bury the content in CSS, you can use the attr expression to dynamically get the content from the page elements:
/* & lt； div data-line =“ 1“& gt； & lt/div & gt； */
Div [data-line]: in {
Content: attr (data line);
/* Don't put quotation marks on the attribute name! The */ }attr attribute is usually used with the user-defined attribute data- because although other traditional attributes can also store values, they are usually not suitable for storing expressive words.
String concatenation operation in content
This string concatenation is very similar to traditional programming languages:
/* & lt； div data-line =“ 1“& gt； & lt/div & gt； */
Div [data-line]: after
{ content:“【line“attr（data-line）“】“； } In CSS3, you can complete string splicing just like in JavaScript, and it is also very useful to dynamically generate the page content of attr. We can use it with content to manipulate many other elements and attributes of the page.
Summary: