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 伪元素