.numbers {
counter-reset:sum;
}
#one:checked {
counter-increment:sum 1;
}
#two:checked {
counter-increment:sum 2;
}
#three:checked {
counter-increment:sum 3;
}
#four:checked {
counter-increment:sum 4;
}
#five:checked {
counter-increment:sum 5;
}
#one-hundred:checked {
counter-increment:sum 100;
}
.sum::after {
content:'= ' counter(sum);
}
body {
font-family:Verdana,sans-serif;
}
label {
font-size:15px;
margin:0 10px 0 0;
display:inline-block;
}
input[type=checkbox] {
position:absolute;
left:-10000px;
}
input[type=checkbox] + label:before {
content:"";
border:1px solid #000;
color:transparent;
cursor:pointer;
display:inline-block;
font-size:15px;
line-height:16px;
margin:0 5px 0 0;
height:18px;
width:18px;
text-align:center;
vertical-align:middle;
transition:color ease .4s;
}
input[type=checkbox]:checked + label:before {
content:"\2713";
color:#000;
}