【CSS】::marker（擬似要素） - リストのマーカー（箇条記号）

CSSの擬似要素/markerについて解説します。

検証環境

CSS

macOS

14.1

marker

擬似要素/markerは“リストの箇条記号を表す擬似要素”です。

通常、li要素の箇条記号（黒丸など）を指定するために使用します。

::marker {
    content: 値;
    プロパティ名: プロパティ値;
}

通常、擬似要素/markerはcontentプロパティと合わせて使用します。

contentプロパティは文字や画像などのコンテンツ（値）を指定します。

次のコードは擬似要素markerでli要素の箇条記号を小なり括弧（>）に変更します。

sample.html

<style>
___ih_hl_start
li::marker {
___ih_hl_end
    content: "> ";
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー

contentプロパティを設定することで、その値が箇条記号として使用されます。