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

Editor to share with you how to use the content attribute in CSS3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The css attribute [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.

For example, I have the following html structure:

This is Plan A.

This is Plan A.

This is Plan A.

This is Plan A.

This is Plan A.

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 content attributes in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.