「li要素」の左側につく記号のことを「マーカー」といいます。「ul要素」の中の「li要素」だとデフォルトで「・」です。
「ul要素」や「ol要素」などの中に書く「li要素」は、特に指定をしていなくてもデフォルトで「display: list-item;」となっていると思います。
そのような「display: list-item;」となっている要素には「マーカー」がつくのですが、その「マーカー」にスタイルを当てることができるのが擬似要素の「::marker」です。
※基本Safariでは動作しない。
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 皆川瞬時
.box ul li {
display: list-item;
}
.box ul li::marker {
content: '✓';
}
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 皆川瞬時
#box2 ul li::marker {
content: '✓';
color: red;
font-weight: bold;
font-size: 120%;
}
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 皆川瞬時
- 椎名ただし
- 佐々木ヨーコ
#box3 ol li::marker {
font-size: 20px;
font-style: italic;
font-weight: bold;
}
#box3 ol li:nth-child(3n)::marker {
color: red;
}
#box3 ol li:nth-child(3n+1)::marker {
color: green;
}
#box3 ol li:nth-child(3n+2)::marker {
color: pink;
}
以下は ::marker の content プロパティにユニコード文字を指定した例です。
16進法の'U+1F600'が`U+`が不要で、 '\1F600';のように'\'でエスケープします。
16進法の'U+1F600'が`U+`が不要で、 '\1F600';のように'\'でエスケープします。
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 佐々木ヨーコ
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 佐々木ヨーコ
- 山田太郎
- 飯塚ようこ
- 篠塚春子
- 佐々木ヨーコ
#box4 ul li {
padding-inline-start: .5em;
font-size: 18px;
}
#box4 ul#u1 li::marker {
content: '\1F600';
}
#box4 ul#u2 li::marker {
content: '\1F46E;';
}
#box4 ul#u3 li::marker {
content: '\1F977;';
}