CSS3

@規則用記述子

additive-symbols

[Edge]○。→●、mdn

リスト マーカ文字の定義。

<integer[0,∞]> && <symbol>

後の例を参照。

<integer[0,∞]> ○

<symbol>

＝<string> | <image> | <custom-ident>

以下のCSSが組み込んであります：

<OL class=Test>
 <LI>LI１
 <LI>LI２
 <LI>LI３
 <LI>LI４
 <LI>LI５
 <LI>LI６
</OL>

［symbols／additive-symbols 記述子の値を成す各 <symbol> は、［system 記述子で指定される、マーカ構築アルゴリズム］に利用される一連の記号 ― カウンター記号 ― を指定する。

additive-symbols 記述子は、カウンター･システムが［additive］の場合には指定されなければならない ― さもなければ、当の @counter-style はカウンター･スタイルを定義しない（が、at-規則としては依然として妥当である）。

一部のカウンター･システムでは、symbols 記述子に 2 個以上のエントリが要求されている ― 1 個しかない場合、その記述子は無効になり、無視されるものとする。

各カウンター記号は、［文字列（<string>）、画像（<image>）、識別子（<custom-ident>）］いずれかをとり、この 3 種を単独の記述子に混在させることもできる。カウンター表現は、カウンター記号をいくつか連結して構築される。識別子は、同じ文字を包含する文字列として具現化される。画像は行内レベルの置換要素として具現化される。画像によるカウンター記号の既定のオブジェクト･サイズは 1em 平方になる。

注記： <symbol> における <image> 構文は、現在はリスク下にある。現在、それを実装しようと計画している実装は無い上、counter() の一部の用法を全部的に取り扱わない仕方で複雑化させる。

注記： 文字列でなく識別子を利用して記号を定義するときは、識別子の構文に注意。
特に、"*"の様な普通字でない ASCII は、識別子でないので、引用符で括って文字列にしなければならない。
この仕様で定義されるカウンター･スタイルのうち一部で利用される 16 進エスケープは、（その後に数字を続けても多義的にならないようにするため）直後のスペースを“食べる”ので、その直後の数字と分離するためには、スペースを 2 個挟む必要がある ― さもなければ、同じ識別子内の隣接する一部分と見なされることになる。
例えば symbols: \660 \661; は、文字 U+0660、U+0661 からなる単独の記号を定義する ― 2 個の文字を定義するためには、symbols: "\660" "\661" の様にエスケープされた各 文字を引用符で括るか、それらの合間に 2 個のスペースを挟む必要がある。

@counter-style dice {
  system: additive;
  additive-symbols: 6 ⚅, 5 ⚄, 4 ⚃, 3 ⚂, 2 ⚁, 1 ⚀;
  suffix: " ";
}

テスト