.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; }