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

This article mainly introduces how to use the content attribute in CSS3. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Content is used with: after and: before pseudo elements to display content before or after the object.

The value of content:

Normal: default value. The performance is the same as the none value.

None: no values are generated. Insert tag attribute value: insert an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address: insert string

Counter (name): using named counters

Counter (name,list-style-type): uses named counters and complies with the specified list-style-type property

Counters (name,string): use all named counters

Counters (name,string,list-style-type): uses all named counters and complies with the specified list-style-type property

No-close-quote: the trailing tag of the quotes attribute is not inserted. But increase its nesting level

No-open-quote: the pretag of the quotes attribute is not inserted. But reduce its nesting level

Close-quote: insert the tag after the quotes attribute

Open-quote: inserts the front tag of the quotes attribute

The values that are difficult to understand here are: counter (name) these

Here is a summary of this piece, and finally the demo of each value will be given.

The html structure is as follows:

This is an ordered list.

This is an ordered list.

This is an ordered list.

This is an ordered list.

This is an ordered list.

I want to add the current li [index] value to each li:

Ul li {

Counter-increment:index

}

Ul li:after {

Content:' Statistics: 'counter (index)

Display:block

Line-height:35px

}

Explanation:

Count (name) the name here must be specified in advance, otherwise all values will be 0

Count (name,list-style-type) the list-style-type here is the value of the list-style-type attribute in css

The complete DEMO is shown below

CSS content

.string p:after {

Margin-left:-16px

Background: # fff

Content: "support"

Color: # f00;}

.attr p:after {

Content: attr (title);}

.url p:before {

Content: url (https://pic.cnblogs.com/avatar/779447/20160817152433.png);

Display: block;}

.test ol {

Margin: 16px 0

Padding: 0

List-style: none;}

.counter1 li {

Counter-increment: testname;}

.counter1 li:before {

Content: counter (testname) ":"

Color: # f00

Font-family: georgia,serif,sans-serif;}

.counter2 li {

Counter-increment: testname2;}

.counter2 li:before {

Content: counter (testname2,lower-roman) ":"

Color: # f00

Font-family: georgia,serif,sans-serif;}

.counter3 ol ol {

Margin: 0.00028px;}

.counter3 li {

Padding: 2px 0

Counter-increment: testname3;}

.counter3 li:before {

Content: counter (testname3,float) ":"

Color: # f00

Font-family: georgia,serif,sans-serif;}

.counter3 li li {

Counter-increment: testname4;}

.counter3 li li:before {

Content: counter (testname3,decimal) "." counter (testname4,decimal) ":";}

.counter3 li li li {

Counter-increment: testname5;}

.counter3 li li li:before {

Content: counter (testname3,decimal). "counter (testname4,decimal)". "counter (testname5,decimal)": ";}

String:

Does your browser support the content attribute: no

Attr:

Url ():

If you see my profile picture, the browser you are using currently supports the content attribute.

Counter (name):

List item

List item

List item

Counter (name,list-style-type):

List item

List item

List item

Counter (name) expanding applications:

List item

List item

List item

List item

List item

List item

List item

List item

List item

List item

List item

The above is all the content of the article "how to use the content attribute in CSS3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.