Pure CSS for counter effects

First on:

Click the Options box, the following numbers dynamically display the total number, the effect is implemented by the pure CSS. How did that come about? The main thing is to rely on the CSS counter counter.

The Counter-reset property of CSS allows you to set a counter and increment the effect through the Counter-increment property. Specifically, you can see the code:

1 HTML {2    counter-reset:section;  3 }4input:checked{5    counter-increment:section;  6 }7. Counter:after{8   

which of the following cuisines do you like? <ol>    <Li><inputtype= "checkbox"><label for= "Food1">Shandong</label></Li>    <Li><inputtype= "checkbox"><label for= "Food2">Sichuan</label></Li>    <Li><inputtype= "checkbox"><label for= "Food3">Cantonese</label></Li>    <Li><inputtype= "checkbox"><label for= "FOOD4">Su cuisine</label></Li>    <Li><inputtype= "checkbox"><label for= "Food5">Zhejiang cuisine</label></Li>    <Li><inputtype= "checkbox"><label for= "Food6">Fujian cuisine</label></Li>    <Li><inputtype= "checkbox"><label for= "Food7">Hunan</label></Li>    <Li><inputtype= "checkbox"><label for= "Food8">Huizhou Cuisine</label></Li></ol>a total of selected<bclass= "Counter"></b>Types of cuisine

Counter-reset can also set multiple counter to make different counts. For example, the hierarchy of common article headings: 1th Chapter 1.1, section 1.2 ... such as

HTML {    counter-reset:section;} H1 {    counter-reset: subsection;} H1:before {    counter-increment: section;     content: "section" Counter ".";} H2:before {    counter-increment: subsection;     content: "subsection" Counter (section) "." Counter (subsection) ".";}

<H1>First Level title</H1>    <H2>Second Level title</H2>    <H2>Second Level title</H2>    <H2>Second Level title</H2><H1>First Level title</H1>    <H2>Second Level title</H2>    <H2>Second Level title</H2><H1>First Level title</H1>    <H2>Second Level title</H2>    <H2>Second Level title</H2>    <H2>Second Level title</H2>

Effect:

Even, we can control the number of counter-increment increments once.

HTML{Counter-reset:sum;}input{position:Absolute;Clip:Rect (0 0 0 0); }. number{Display:Inline-block;width:50px;Height:50px;font-size:24px;Line-height:50px;text-align:Center;Color:#0867B3;background:#eee;}Input:checked+label{Color:#fff;background:#0867B3;}#number1: Checked{counter-increment:Sum 2;}#number2: Checked{counter-increment:sum;}#number3: Checked{counter-increment:sum-6;}#number4: Checked{counter-increment:sum +11;}#number5: Checked{counter-increment:sum-19;}#number6: Checked{counter-increment:sum-3;}Strong:before{content:"=" counter (sum)}

<inputtype= "checkbox"ID= "Number1"><labelclass= "Number" for= "Number1">+2</label><inputtype= "checkbox"ID= "Number2"><labelclass= "Number" for= "Number2">+17</label><inputtype= "checkbox"ID= "Number3"><labelclass= "Number" for= "Number3">-6</label><inputtype= "checkbox"ID= "Number4"><labelclass= "Number" for= "Number4">+11</label><inputtype= "checkbox"ID= "Number5"><labelclass= "Number" for= "Number5">-19</label><inputtype= "checkbox"ID= "Number6"><labelclass= "Number" for= "Number6">-3</label><Strongclass= "Number"></Strong>

Pure CSS for counter effects