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

Editor to share with you how to use css3 content attributes to add content to elements. I hope you will get something after reading this article. Let's discuss it together.

The css3 content attribute belongs to the content generation and replacement module, which adds content to the specified element. In fact, the content generation and replacement behavior goes beyond the core functions of CSS stylesheets, replacing the role tasks that would otherwise be implemented by JavaScript scripts. However, the content attribute is more practical, it can satisfy the style design to temporarily add non-structural style service tags, or add supplementary descriptive content and so on.

The initial variable of the content attribute of css3 is normal and applies to all available elements. The values are briefly described as follows.

Ordinary: numerical value.

String: inserts text content.

Attr (): inserts the attribute value of the element.

Uri (): insert an external resource, such as image, audio, video, or any other resource supported by the browser.

Counter (): counter for inserting sort identities.

None: nothing.

A simple use of content attributes is to add content to a document. This example adds a line of prompt text to the div element to indicate whether the current browser supports content generality.

The complete code is as follows:

P {text-align:center; red;}

P: {after content: "support";}

Does the current browser support content features?

The following example uses the css3 content attribute to add an external image to the element, with the following code:

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.