counter-incrementにattr()を用いたい

###前提・実現したいこと
CSSのattr()を用いて、counter-incrementに任意の数値を加算したい。
JSを使用せずにHTMLとCSSのみで作りたい。

###発生している問題・エラーメッセージ

attr()部分が認識されずに、未記入のときの挙動（＋１ずつ）をする

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>attr counter</title>
6	<style>
7
8	body{
9		counter-reset: score;
10	}
11
12	input:checked{
13		counter-increment: score attr(data-score integer);
14	}
15
16	span::before{
17		content: counter(score);
18	}
19
20	</style>
21</head>
22<body>
23
24	<input type="checkbox" data-score="1"><label>+1</label><br>
25	<input type="checkbox" data-score="10"><label>+10</label><br>
26	<input type="checkbox" data-score="100"><label>+100</label><br>
27
28	<span>点</span>
29
30</body>
31</html>

###試したこと
以下のソースに書き換えたところ自分の考えている動きをしたものの、
ひとつひとつ設定する必要性があり、attrで解決できるならばしたいと考えている

CSS
1/*
2input:checked{counter-increment: score attr(data-score integer);}
3*/
4
5input[data-score="1"]:checked{counter-increment: score 1;}
6input[data-score="10"]:checked{counter-increment: score 10;}
7input[data-score="100"]:checked{counter-increment: score 100;}
8