The usage of content and attr in CSS3

The emergence of CSS3 makes the function of style sheet more and more powerful, and in a sense, it makes it easier for us to develop it. Although there are many heavyweight new features in CSS3 – such as transitions, animations, And transformations, but one feature is not so eye-catching, but it is very useful. It is content and attr expressions. They can quietly use CSS to generate content under your page. Let’s see how attr and content work together to produce magical effects.

Basic content usage

The content attribute enables the programmer to fill in the content in the page elements using CSS

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

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

Content and attr are used together

If you don’t want to write content dead in CSS, you can use attr expression to dynamically get content from page elements

/* <div data-line="1"></div> */

div[data-line]:after { 
	content: attr(data-line); /* 属性名称上不要加引号! */
}

Attr attribute is usually used with custom attribute data – because other traditional attributes can store values, but they are not suitable for storing expressive text.

String connection operation in content

This kind of string connection is very similar to the conventional programming language

/* <div data-line="1"></div> */

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

Do you still need to assemble strings in JavaScript? CSS3 can complete these, is not the feeling that CSS3 can partially replace JavaScript! Attr’s ability to dynamically generate page content is really exciting. You can actually use it with content to manipulate many other elements and properties of the page.

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image