list-style-type で指定可能なリストスタイルを新たに生成します。

@counter-style my-style {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: ") ";
}
ol.test {
  list-style-type: my-style;
}

<ol class="test">
<li>One
<li>Two
<li>Three
</ol>

数値として使用するシンボルのリストを指定します。数値を指定する場合は '1' '2' '3' の様にシングルクォートかダブルクォートで囲む必要があります。"\32D0" のように Unicode を指定することもできます。

@counter-style my-style {
  system: cyclic;
  symbols: a b c;
  suffix: ". ";
}

a. b. c. a. b. c. ... を繰り返して表示します。

@counter-style my-style {
  system: cyclic;
  symbols: a b c;
  suffix: ". ";
}

a. b. c. までは cyclic と同様ですが、以後は fallback で指定されたスタイル(指定が無ければ 4. 5. 6. ...)で表示します。

@counter-style my-style {
  system: fixed;
  symbols: a b c;
  suffix: ". ";
  fallback: cjk-decimal;
}

a. b. c. aa. bb. cc. aaa. bbb. ccc. aaaa. bbbb. cccc. ... の順序で表示します。

@counter-style my-style {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

a. b. c. aa. ab. ac. ba. bb. bc. ca. cb. cc. aaa. aab. aac. ... の順序で表示します。

@counter-style my-style {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

b. c. ba. bb. bc. ca. cb. cc. baa. bab. bac. bba. bbb. bbc. ... の順序で表示します。最初のシンボルを 0 とみなすため、先頭が a で始まることはありません。

@counter-style my-style {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

X を 10、V を 5、I を 1 として数えます。I. II. III. IIII. V. VI. VII. VIII. VIIII. X. XI. ... の順序で表示します。

@counter-style my-style {
  system: additive;
  additive-symbols: 10 X, 5 V, 1 I;
  suffix: ". ";
}

既存のスタイルをベースに prefix や suffix などの属性を指定します。下記の例は 1) 2) 3) 4) 5) ... の順序で表示します。

@counter-style my-style {
  system: extends decimal;
  suffix: ") ";
}

負の数値を表示する際のプレフィックスとサフィックスを指定します。サフィックスは省略可能です。下記の例は (3). (2). (1). 0. 1. 2. ... の順序で表示します。

@counter-style my-style {
  system: extends decimal;
  negative: '(' ')';
  suffix: ". ";
}

プレフィックスを指定します。下記の例は (1) (2) (3) ... の順序で表示します。

@counter-style my-style {
  system: extends decimal;
  prefix: '(';
  suffix: ') ';
}

サフィックスを指定します。下記の例は (1) (2) (3) ... の順序で表示します。

@counter-style my-style {
  system: extends decimal;
  prefix: '(';
  suffix: ') ';
}

スタイルを適用するレンジを指定します。下記の例では 1～3 の間のみスタイルが適用され、a. b. c. が表示され、以降は fallback で指定したスタイル(指定しない場合は 4. 5. 6. ...)の順序で表示します。infinite は無限大、auto は自動制御することを意味します。

@counter-style my-style {
  system: alphabetic;
  symbols: a b c;
  suffix: '. ';
  range: 1 3;
  fallback: cjk-decimal;
}

pad: 3 '0' とした場合、3桁になるまで 0 でパディングします。下記の例は 000. 001. 002. 003. ... の順序で表示します。

@counter-style my-style {
  system: extends decimal;
  pad: 3 '0';
}

範囲を超えた場合など、指定したスタイルが適用されない場合に、代わりに利用するカウンタースタイルの名前を指定します。下記の例では、a. b. c. までは fixed が指定されますが、その後は cjk-decimal に従い、四. 五. 六. ... となります。

@counter-style my-style {
  system: fixed;
  symbols: a b c;
  fallback: cjk-decimal;
}

音声での読み上げ方式を指定します。speak には、auto(自動)、bullets(順不同のリスト項目が読み上げられるブラウザ依存のフレーズやオーディオのキューを使用)、numbers(数字として読み上げ)、words(単語として読み上げ)、spell-out(可能であれば単語として読み上げ、単語を解釈できなければ数字として読み上げ)、counter-style-name(他のカウンタースタイルを参照)の何れかを指定します。

@counter-style my-style {
  system: extends decimal;
  speak-as: number;
}

• https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style
• https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule