【CSS Modules】::marker疑似要素の使い方

::markerオブジェクトは、HTMLのリストアイテム（通常は <li> 要素や、display: list-item;が適用された要素）の先頭に表示されるマーカー部分を表すオブジェクトです。これは、実際のDOMツリーには存在しない仮想的な要素であり、開発者がリストのマーカーの見た目を個別に制御するために使用されます。

このオブジェクトが指すマーカーとは、順序なしリストの黒点や、順序付きリストの数字、またはユーザーがlist-style-imageプロパティで設定した画像や記号など、リストアイテムの先頭に表示されるシンボルを指します。

::markerに適用できるCSSプロパティは限定されており、主にcolor（マーカーの色）、font（マーカーのフォントスタイル、サイズ）、text-align（マーカーの揃え方）、content（マーカーの内容を置き換える）などが挙げられます。特にcontentプロパティを使用すると、デフォルトの数字や記号を、任意のテキスト、絵文字、またはCSSのurl()関数で指定したカスタム画像などに置き換えることが可能です。

ただし、width、height、padding、marginといったボックスモデルに関連するプロパティや、background-colorのようなプロパティは::markerには直接適用できません。これは、::markerがリストアイテムのレイアウト上の特定の領域を指すものの、そのボックスモデルの特性は親要素のlist-style関連プロパティやリストのコンテキストによって大きく影響されるためです。

::markerオブジェクトを活用することで、ウェブページやアプリケーションにおけるリストのデザインの自由度が高まり、より一貫性のある、かつ視覚的に魅力的なユーザーインターフェースを実現することができます。

Copy
1li::marker {
2  color: #333;
3  font-size: 1rem;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません