MRRI

CSSの擬似要素::markerは、リスト項目（<li>）のマーカー部分をカスタマイズするために使える便利な機能です。
これを使えば、リストの「●」「1.」といったデフォルトのマーカーをスタイル付けし、デザインの幅を広げることができます。

基本的な使い方

<!– HTML –>
<ul>
　<li>りんご</li>
　<li>みかん</li>
　<li>バナナ</li>
</ul>

/* CSS */
li::marker {
　display: list-item;
　color: red; /* マーカーの色 */
　font-size: 1.2em; /* マーカーのサイズ */
　content: “★ “; /* マーカーの内容を変更 */
}

このコードを適用すると、リストのマーカーが「★」に変わり、赤く大きなマーカーになります。

サポートされるプロパティ

::markerで使用できるスタイルは限られています。主に次のものが使用可能です。

• content：マーカーの内容をカスタマイズ
• color：マーカーの色を指定
• font関連：font-size、font-weightなど

注意：::markerではbackgroundやbox-shadowなど一部のプロパティは適用されません。