CSS ::marker擬似要素

定義と使用方法

CSS ::marker 擬似要素は、リストアイテムのマーカースタイルを設定するために使用されます。

この擬似要素は、display: list-itemに設定されたどんな要素にも適用できます。

注意：以下の属性は、以下と一緒に使用できます： ::marker 一緒に使用：

• すべてのフォント属性
• すべてのアニメーション属性
• すべてのトランジション属性
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

インスタンス

例1

すべてのリストアイテムのマーカーに色とフォントサイズを設定します：

::marker {
  font-size: 20px;
  color: red;
}

自分で試してみる

例2

<ul>リストのリストアイテムのマーカーに内容、色、フォントサイズを設定します：

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

自分で試してみる

例3

<h2>要素をdisplay: list-itemに設定し、リストアイテムのマーカーに内容と色を設定します：

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

自分で試してみる

CSS文法

::marker {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、その擬似要素を完全にサポートする最初のブラウザバージョンを指定しています。

関連ページ

チュートリアル：CSS 仮要素