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 declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該偽元素的首個瀏覽器版本。

相關頁面

教程：CSS 偽元素