[CSSチュートリアル】CSS擬似要素::マーカー解説

この記事では、CSSの中でも特に興味深い擬似要素の一つである ::marker これを使えば、テキスト・シーケンスをより面白くすることができます。

マーカーとは

CSS擬似要素 ::marker は擬似要素で CSS擬似要素レベル3 から新たに CSS擬似要素レベル4 Chrome 86+で洗練された比較的新しい擬似要素で、Chrome 86+から始まるブラウザでサポートされています。

これを使うと、ある要素に疑似要素を追加して、弾丸や数字を生成することができる。

通常、次のような構造になっています。

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

デフォルトで特別なスタイルを追加しない場合、おそらく次のようになります。

を使用することで ::marker は、シリアル番号の前のドットを修正することができます。

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}

ドットは好きなものに変換することができます。

マーカー擬似要素に関する制限事項

まず、対応する機能として ::marker 要素は、以下のようなリスト項目のみ可能です。 ul の中にある li は、その ol 内部の li はリスト項目です。

もちろん、他の要素で使用できないわけではありません。 display: list-item を持つ要素で ::marker 擬似要素です。

次に、擬似要素内のスタイルについては、どんなスタイル属性も使えるわけではなく、現状ではこれらしか使えません。

• すべてのフォントプロパティ -- つまりフォントプロパティは関連している
• color -- 色の値
• contentプロパティ -- 序列の内容を埋めるために使われる、::before疑似要素の内容に似た内容
• text-combine-upright (en-US), unicode-bidi and direction プロパティ -- 文書の記述方向関連

マーカー(Marker)の適用に関するいくつかの検討

例えば、次のような見出しの前の装飾をよく見かけます。

あるいは、絵文字の表現を使うこともできます。

は、どちらもよく使われる ::marker を使用して表示していることに注意してください。 list-item 要素を使用する場合は display: list-item :

<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>

h1 {
  display: list-item;
  padding-left: 8px;
}
h1::marker {
  content: 'ralph lauren';
}
h1:nth-child(2)::marker {
  content: '????' ;
}

[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]