Newly available 条件付きOK。主要ブラウザで対応済み。装飾的なリストスタイルの実装に便利。
タイポグラフィ Newly available

@counter-style

@counter-style を使うと、list-style-type で使えるカスタムカウンタースタイルを定義できる。symbols、system、prefix、suffix などのディスクリプタで数字・記号・絵文字など自由なマーカーを設定可能。組み込みの decimal や disc では実現できない独自のリスト表示が可能になる。

リストカスタマイズ

概要

@counter-style を使うと、list-style-type で使えるカスタムカウンタースタイルを定義できる。symbols、system、prefix、suffix などのディスクリプタで数字・記号・絵文字など自由なマーカーを設定可能。組み込みの decimal や disc では実現できない独自のリスト表示が可能になる。

対応ブラウザ

デスクトップ

Chrome 91+
Edge 91+
Safari 17+
Firefox 33+

モバイル

Chrome Android 91+
Safari iOS 17+
Firefox Android 33+

基本構文

CSS 
@counter-style emoji-list {
  system: cyclic;
  symbols: "🔥" "⭐" "💡" "🎯";
  suffix: " ";
}

ul.emoji {
  list-style-type: emoji-list;
}

@counter-style japanese {
  system: fixed;
  symbols: "一" "二" "三" "四" "五";
  suffix: "、";
}

実務での使いどころ

  • カスタムリストマーカー

    絵文字やブランド固有の記号をリストマーカーとして使用し、デザインに統一感を持たせる。

  • 多言語の番号スタイル

    漢数字やアラビア・インド数字など、各言語に固有の番号体系を定義する。

注意点

  • 非対応ブラウザでは fallback ディスクリプタで指定したスタイルまたは decimal にフォールバックする。

アクセシビリティ

  • カスタムマーカーを使っても、スクリーンリーダーはリスト項目として正しく読み上げる。装飾目的のマーカーに意味を持たせないこと。

参考リンク