counter function
It is usually associated with pseudo-elements used together, but theoretically can support the value of the use of any place
return value
The current value of the specified counter
usage
counter(countername)
The name of the counter through the property counter-INCREMENT , counter the RESET- defined.
counter-increment property
Its value comprises two parts: a first counter for the name, the second identification value is incremented value (default 1), such as:
counter-increment: count 1 / * increments by 1 * /
counter-increment: count 2 / * 2 * each increment /
counter-reset property
Its value comprises two parts: The first part is the name of the counter; the second part of the counter start value (default is 0), for example:
counter-reset: count 0 / * start counting with 1 * /
counter-reset: count 2 / * start counting from the 3 * /
counter-reset: count1 0 count2 1 count3 2 / * declares three counters count1, count2, count3 * /
And with the use of content
content mainly with : after,: before, :: after , :: before to match with.
：after{
content：conter(count)
}
Overall examples
html：
<dl><dt>example</dt><dd>example</dd><dd>example</dd><dd>example</dd><dt>example2</dt><dd>example2</dd><dd>example2</dd><dd>example2</dd><dd>example2</dd></dl>css：dl {counter-reset:test10;}dt {counter-increment: test1;counter-reset: test20;}dt:before{content:counter(test1)"、";}dd{counter-increment:test2;}dd:before{content:counter(test1)"-"counter(test2)"、";}
Results are as follows:
