::marker

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

::marker CSS 偽元素 用於選擇列表項的標記框,該標記框通常包含一個專案符號或數字。它適用於任何設定為 display: list-item 的元素或偽元素,例如 <li><summary> 元素。

試一試

li::marker {
  content: "✝ ";
  font-size: 1.2em;
}
<p>Group known as Mercury Seven:</p>
<ul>
  <li>Malcolm Scott Carpenter</li>
  <li>Leroy Gordon (Gordo) Cooper Jr.</li>
  <li>John Herschel Glenn Jr.</li>
  <li>Virgil Ivan (Gus) Grissom</li>
  <li>Walter Marty (Wally) Schirra Jr.</li>
  <li>Alan Bartlett Shepard Jr.</li>
  <li>Donald Kent (Deke) Slayton</li>
</ul>

允許的屬性

::marker 偽元素支援有限數量的 CSS 屬性,包括:

注意: 規範指出未來可能會支援更多的 CSS 屬性。

語法

css
::marker {
  /* ... */
}

示例

HTML

html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

CSS

css
ul li::marker {
  color: red;
  font-size: 1.5em;
}

結果

規範

規範
CSS 偽元素模組 Level 4
# marker-pseudo

瀏覽器相容性

另見