::marker | スタイルシートリファレンス

::markerとは?

::markerは箇条書きのアイテム要素(li要素)の記号を表します。通常は、ul要素だと黒丸でol要素だと番号になっている部分です。

::markerの疑似要素はdisplay: list-item;が設定されている要素で利用することが出来ます。

::markerの使い方

構文

::marker {
  /* マーカーに適用したいプロパティ */
}

設定可能な値

::markerの疑似要素で指定できるプロパティには制限があります。

  • フォント系のプロパティ
  • white-spaceプロパティ
  • colorプロパティ
  • contentプロパティ
  • アニメーション・トランジション系のプロパティなど

::markerを使ったサンプルコード

li要素の::markerに対して色とフォントサイズを設定しています。

箇条書きのマーカーが赤丸で表示されます。

::markerのブラウザ対応状況

::markerの疑似要素自体の対応と、アニメーションとトランジションに分けれてブラウザの対応状況が異なります。

それぞれ下記のリンクから対応状況を確認出来ます。

Can I use... Support tables for HTML5, CSS3, etc

::marker自体の対応状況はIEやOpera、Edgeの旧バージョン、Chromeの旧バージョンなどで非対応があり、更にアニメーションとトランジションでは更に対応状況が芳しくありません。

::markerを利用の際には対応しているブラウザに注意して利用するようにしましょう。