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

This article will explain in detail how to use the new attribute content of css3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Detailed explanation of content attributes

1. The function of content attribute:

The content attribute is used to insert generated content, often in conjunction with: before selector and: after selector to clear floats or place the generated content before or after the content of an element.

2. Basic grammar:

Content:normal | string | attr () | uri () | counter ()

Normal: default value.

String: check the contents of the text, which is usually a string.

Attr (): insert the attribute value of the element, syntax: attr (attribute).

Uri (): insert an external resource file, which can be an image, audio, video file, or any other resource supported by the browser.

Counter (): counter for inserting sort identifiers. Counter () can append not only numeric numbers, but also alphanumeric numbers or Roman numeral numbers. Syntax: content:couter (counter name, number type)

3. The browser supports:

1.jpg

The content property is supported by all browsers.

Note: IE8 supports the Content attribute only if! DOCTYPE is specified.

Second, the application of csscontent attribute

1. The csscontent attribute uses pseudo-class after to clear the float.

The content attribute of css is specifically applied to before/after pseudo-elements, and the most common application is to use pseudo-classes to clear floats.

/ / A common code that uses pseudo-classes to clear floats

.clearfix: after {

Content: "."; / / the content attribute is utilized here

Display:block

Height:0

Visibility:hidden

Clear:both

}

.clearfix {

* zoom:1

}

Principle:

The after pseudo-element generates a block-level element whose content is a dot after the element through content, and then clears the float using clear:both.

2. The csscontent attribute uses pseudo elements to insert content into the page.

1) insert plain text

Usage: content: "inserted article", or content:none does not insert content

Example:

Insert plain text

H2::after {

Content: "insert content after H2"

}

H3::after {

Content:none

}

This is H2.

This is H3.

On "how to use css3 new attribute content" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.