CSS 的 ::marker 让文字序号不再呆板

在 CSS 的世界里，::marker 伪元素横空出世，它赋予了文字序号焕然一新的面貌，打破了原本呆板沉闷的刻板印象。

什么是 ::marker？

::marker 是 CSS Lists Module Level 3 中提出的一个伪元素，它专门用于修改文字序号的外观。通过 ::marker，我们可以自定义序号的样式，使其更具个性和视觉冲击力。

使用方法

要使用 ::marker，只需将其附加到列表元素的 ::before 伪元素上。例如：

li::before {
  content: counter(item) ". ";
  font-weight: bold;
  color: red;
}

在这个示例中，我们指定了序号的内容、字体加粗以及颜色。

自定义序号样式

::marker 提供了丰富的选项，让我们可以随心所欲地自定义序号样式。我们可以设置其：

• 内容：使用 content 属性指定序号的内容，可以是文本、数字或符号。
• 字体样式：通过 font-family、font-size 和 font-weight 等属性控制序号的字体。
• 颜色：使用 color 属性更改序号的颜色。
• 大小和间距：使用 width、height、margin 和 padding 等属性控制序号的大小和间距。
• 背景：使用 background-color 和 background-image 属性自定义序号的背景。
• 旋转：使用 transform: rotate() 属性旋转序号。

SEO 优化

除了美化序号外，::marker 还可以为 SEO 提供助力。通过使用性序号文本，我们可以提高搜索引擎的可见性。例如，我们可以将序号设置为章节或标题的简要

h2::before {
  content: "章节：" counter(section) " ";
  font-weight: bold;
}

示例

以下是使用 ::marker 创建的不同序号样式的示例：

• 圆形序号：

li::before {
  content: counter(item) " ";
  border: 1px solid black;
  border-radius: 50%;
  padding: 5px;
}

• 带下划线的数字序号：

li::before {
  content: counter(item) ". ";
  text-decoration: underline;
  font-weight: bold;
}

• 图片序号：

li::before {
  content: url("image.png");
  margin-right: 5px;
}

结论

CSS 的 ::marker 伪元素为文字序号注入了新的活力，让它们不再是死气沉沉的点缀，而是成为网页设计中一个富有表现力的元素。通过 ::marker，我们可以自由地自定义序号样式，提升网页的视觉美感和用户体验。