list-style: symbols() で脚注の記号（*、†、‡）を1行で付ける

list-style: symbols(symbolic "*" "†" "‡") と書くだけで、@counter-style を定義せずに脚注リストのマーカーを *、†、‡、、††… と並べられる。

どんな時に使う？

記事末尾の注釈、料金表の「※」付き注記、論文風の脚注など、番号ではなく記号でマーカーを付けたいとき。これまでは @counter-style で名前付きのカウンタースタイルを作るか、::before に手で記号を書く必要があった。symbols() はその場限りの無名カウンタースタイルを値として直接書ける。

コード

css

.notes {
  list-style: decimal;                       /* 未対応ブラウザ向けの保険 */
  list-style: symbols(symbolic "*" "†" "‡"); /* 対応ブラウザではこちら */
}

html

<ol class="notes">
  <li>税込み価格です。</li>      <!-- * -->
  <li>初月のみ適用されます。</li> <!-- † -->
  <li>一部地域を除きます。</li>   <!-- ‡ -->
  <li>2026年12月末まで。</li>    <!-- ** -->
</ol>

最初の引数（種類）で数え方が変わる。

種類	動き	例（"*" "†" "‡"）
`symbolic`	一周するごとに記号を重ねる	, †, ‡, , ††, ‡‡,
`cyclic`	最後まで行ったら最初に戻る	, †, ‡, , †, ‡
`fixed`	一周だけ使い、その後は数字	*, †, ‡, 4, 5
`numeric`	記号を桁として使う（0 を含む N 進数）	"0" "1" なら 2 進数
`alphabetic`	0 なしの桁（a, b, …, z, aa の方式）	"a" "b" なら a, b, aa, ab

種類を省くと symbolic 扱いになる。記号は文字列のほか画像（url() やグラデーション）も渡せる。

注意点・対応状況

Firefox は 35 から、Chrome / Edge は 155（2026-10-06）から対応。Safari は安定版では未対応で、Safari Technology Preview 254 に入った段階（2026-11 時点）。
未対応ブラウザでは symbols() の行が捨てられるので、先に decimal などを書いておけば番号付きリストに戻るだけで壊れない。
無名なので使い回しはできない。同じ記号列を何か所でも使う、接尾辞（suffix）や範囲（range）も決めたい、といった場合は @counter-style を使う。
numeric と alphabetic は記号を2つ以上渡さないと無効になる。

出典

@sanyampunia（2026-11-05）
参考: MDN symbols()、Web features explorer