CSSの「::marker」とは？リストマーカーを自在にカスタマイズする方法

HTMLのリスト要素（<ul>や<ol>）を使っていると、「マーカーの見た目をもっと自由に変えたい」と感じたことはありませんか？そんなときに活躍するのが、CSSの擬似要素「::marker」です。

この記事では、「::marker」の基本的な使い方から実践的なカスタマイズ例、注意点までをわかりやすく解説します。

「::marker」とは？

::markerは、リスト項目の前に表示されるマーカー（黒丸や数字など）をスタイル指定するためのCSSの擬似要素です。具体的には、以下のようなリストのHTMLに対してマーカー部分のスタイルを適用できます。

See the Pen maker_list by Ayane (@ayane_cmn) on CodePen.

従来はこのマーカーの見た目を自由に変えるのは難しかったのですが、::markerを使うことで色・サイズ・フォントなどを細かく指定できるようになりました。

以下は「::marker」を使用した基本的なスタイルの例です。

li::marker {
  color: red;
  font-size: 1.5em;
}

この指定により、マーカーの色が赤くなり、サイズも大きくなります。
対応している主なプロパティは以下の通りです。

プロパティ	内容
color	テキストの色を変更
font 関連	font-family, font-size, font-style, font-variant, font-weight などが使用可
content	マーカーの内容をカスタマイズする（疑似要素共通）
white-space	改行や空白の扱いを変更

そのほかにもtext-combine-upright、unicode-bidi、direction の各プロパティやanimation、transitionプロパティの使用も可能ですが、一部ブラウザでは対応していない場合があります。
（主にSafariで対応していない場合が多いです）

以下のように、数字付きリストのマーカーを装飾することもできます。

See the Pen Untitled by Ayane (@ayane_cmn) on CodePen.

さらに、リストスタイルを全て削除して自作マーカーを入れるような使い方もあります。

See the Pen Untitled by Ayane (@ayane_cmn) on CodePen.

このようなケースでは::markerではなく、::beforeを使って完全オリジナルのマーカーを実装しますが、::markerと併用することで表現の幅がさらに広がります。

一見、便利かつ簡単にスタイル調整ができる::marker ですが、使用するには少し注意するポイントがあります。

::markerは一部のスタイルのみ対応しています。backgroundやtransform、marginなどは使えません。
FlexboxやGridレイアウトの中では動作が変わることがあります。リストの構造が複雑な場合は検証が必要です。
モダンブラウザ（Chrome, Firefox, Safari, Edge）では広くサポートされていますが、Internet Explorerでは非対応です。