CSS Properties Counter Related

I. Contents of content
Used in conjunction with: After and: Before pseudo-elements to display content before or after the object.
1. Normal
The default value, which behaves the same as the none value.
2. None
No value is generated.
3. <attr>
Inserts a Label property value.

A:after {  content: attr (HREF);}

4. <url>
Inserts an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address.

H3:after {  content: url (http://www.baidu.com/imgs/new.png);}

5. <string>
Inserts a string.

H1:after {  content: "H1 inserted after";}

6, counter (name)
Use a named counter.

H1:before {  content:counter (My) ', ';} H1 {  counter-increment:my;}

7, Counter (Name,list-style-type)
Uses a named counter and complies with the specified List-style-type property.

H1:before {  content:counter (my,upper-alpha);   color:red;   font-size:20px;} H1 {  counter-increment:my;}

8, Counters (name,string)
All named counters are used.

H1:before {  content: 'counter ' (My) ' Chapter';   color:red;   font-size:20px;} H1 {  counter-increment:my;}

9, Counters (name,string,list-style-type)
Use all named counters and follow the specified List-style-type property.
10, No-close-quote
Does not insert the post-tag of the quotes property, but increases its nesting level.
11, No-open-quote
Does not insert the quotes attribute's front tag, but reduces its nesting level.
12, Close-quote
Insert the post-tag of the quotes property.
13, Open-quote
Inserts the front tag of the quotes property.

H1{Quotes:"(" ")";/*Use the quotes attribute of an element to specify a text symbol*/}H1::before{content:Open-quote;}H1::after{content:Close-quote;}H2{Quotes:"\"" "\"";/*Add double quotes to escape*/}H2::before{content:Open-quote;}H2::after{content:Close-quote;}

Second, counter counter-increment
1. None
Prevents the counter from increasing.
2. <identifier>
identifier defines one or more selector,id, or class, that will be added.
3. <integer>
Defines the value that the calculator increments each time, which can be negative, and the default value is 1.

 .counter1 li  { Counter-increment : Span style= "color: #0000ff;" > CNAME ;} .counter1 Li:before  {:  counter (CNAME)". ";} .counter2 Li  { Counter-increment :  cname2 2 ;} .counter2 Li:before  { content :  counter (cname2) "." ;} .counter3 Li  { Counter-increment :  cname3-1 ;} .counter3 Li:before  { content :  counter (Cname3) "." ;} 

Third, counter reset Counter-reset
1. None
Prevents the calculator from resetting.
2. <identifier>
identifier defines one or more selector,id, or class, that will be added.
3. <integer>
Defines the value to be reset, which can be negative, and the default value is 0.

. Counter1 Li{counter-increment:CNAME;}. Counter1 Li:before{content:counter (CNAME) ".";Counter-reset:CNAME;}. Counter2 Li{counter-increment:cname2;}. Counter2 Li:before{content:counter (cname2) ".";Counter-reset:cname2;}. Counter3 Li{counter-increment:Cname3;}. Counter3 Li:before{content:counter (Cname3) ".";Counter-reset:cname3-1;}

Iv. quoting quotes
1. None
The Open-quote and close-quote values of the content property will not generate any markup.
2. <string>
A tag that defines the open-quote and Close-quote values for the content property, 2 for a group.

H1 {  quotes:"(" ")";  /* Use the quotes attribute of an element to specify a text symbol */} H1::before {  content:open-quote;} H1::after {  content:close-quote;}

CSS Calculator: http://www.zhangxinxu.com/study/201412/css-counters-number-game.html
CSS counter: http://www.zhangxinxu.com/study/201412/css-counters-get-checked-number.html

CSS Properties Counter Related