CSS ::marker 详解|极客教程

CSS ::marker 详解

在 CSS 中，::marker 伪元素用于设置列表项前面的标记样式，它可以让开发者自定义列表项的标记样式，从而实现特殊的列表样式需求。在本文中，我们将详细解释::marker伪元素的用法和示例。

语法

::marker伪元素的语法如下：

::marker {
  /* 样式属性 */
}

在::marker伪元素中，可以设置的样式属性包括 color, content, font-family, font-size, font-style, font-variant, font-weight, line-height, list-style, list-style-image, list-style-position, list-style-type, text-align等。

使用示例

示例一：更改列表项的标记颜色和大小

<!DOCTYPE html>
<html>
<head>
<style>
ul::marker {
    color: red;
    font-size: 20px;
}
</style>
</head>
<body>

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

</body>
</html>

在上面的示例中，我们使用::marker伪元素将无序列表的标记颜色设置为红色，字体大小设置为20px。运行结果如下：

苹果
香蕉
橙子

示例二：自定义有序列表的标记样式

<!DOCTYPE html>
<html>
<head>
<style>
ol::marker {
    content: "🌟"; /* 使用表情作为标记 */
    color: blue;
}
</style>
</head>
<body>

<ol>
  <li>任务一</li>
  <li>任务二</li>
  <li>任务三</li>
</ol>

</body>
</html>

在上面的示例中，我们使用::marker伪元素将有序列表的标记内容设置为一个星星表情，并将颜色设置为蓝色。运行结果如下：

🌟 任务一
🌟 任务二
🌟 任务三

示例三：隐藏列表的标记

<!DOCTYPE html>
<html>
<head>
<style>
ul.no-marker {
    list-style-type: none;
}

ul.no-marker li::marker {
    display: none;
}
</style>
</head>
<body>

<ul class="no-marker">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

</body>
</html>

在上面的示例中，我们首先使用list-style-type: none隐藏了无序列表的默认标记，然后使用li::marker {display: none;}将::marker伪元素隐藏，从而达到隐藏列表标记的效果。运行结果如下：