CSSのcounters()で箇条書きの数字をカスタマイズできておもしろい

　CSS に counters() というのがあって、 1.1 とかをカスタマイズできておもしろい。 counters() - CSS&colon; Cascading Style Sheets | MDN
　言 葉 庭 というのをシンボルに使うことにして、繋ぎを の にするとこうなる。

@counter-style kotonohanoniwa {
  system: fixed;
  symbols: 言 葉 庭;
  suffix: " ";
}

ol {
  counter-reset: kounter;
}
ol li {
  counter-increment: kounter;
  margin-left: 30px;
}
ol li::marker {
  content: counters(kounter, 'の', kotonohanoniwa) ") ";
}

　実際に ol で見るとこう。

1
1. 1, 1
  1. 1, 1, 1
  2. 1, 1, 2
  3. 1, 1, 3
2. 1, 2
  1. 1, 2, 1
  2. 1, 2, 2
  3. 1, 2, 3
3. 1, 3
  1. 1, 3, 1
  2. 1, 3, 2
  3. 1, 3, 3
2
1. 2, 1
  1. 2, 1, 1
  2. 2, 1, 2
  3. 2, 1, 3
2. 2, 2
  1. 2, 2, 1
  2. 2, 2, 2
  3. 2, 2, 3
3. 2, 3
  1. 2, 3, 1
  2. 2, 3, 2
  3. 2, 3, 3
3
1. 3, 1
  1. 3, 1, 1
  2. 3, 1, 2
  3. 3, 1, 3
2. 3, 2
  1. 3, 2, 1
  2. 3, 2, 2
  3. 3, 2, 3
3. 3, 3
  1. 3, 3, 1
  2. 3, 3, 2
  3. 3, 3, 3

　数字は何個目の箇条かを書いただけで、 MDN の例に倣うとこれも counters() で出せるっぽい。というか今は marker の contents として counters してるというだけで、どこに出してもいいわけだから、なんかおもしろい使い方ができそう。

　追記) ブコメに書いてもらってて気づいたけど、 Safari だと @counter-style が未実装でただの数字に見える。 MDN とかをよく見ると Chrome などでもまだ完全な実装ではないっぽい。 @counter-style - CSS&colon; Cascading Style Sheets | MDN