CSS::marker自定义列表样式教程

想让你的网页列表更具个性化吗？本文将深入解析CSS的`::marker`伪元素，教你如何轻松自定义列表标记样式，摆脱单调的默认样式。通过设置`list-style-type`属性和`::marker`伪元素，你可以随心所欲地修改列表标记的颜色、字体大小，甚至替换为自定义的符号或文字。文章还介绍了如何利用`counter()`函数结合`::before`伪元素，实现更高级的编号格式，例如添加前缀或图标。需要注意的是，`::marker`的兼容性问题以及一些CSS属性的限制，但掌握这些技巧，你就能在现代浏览器中轻松打造美观且独特的列表样式，提升用户体验。快来学习如何用`::marker`让你的列表焕发新生吧！

使用::marker可自定义列表标记样式，如颜色、字体大小；支持color、font-size等属性，通过counter()结合::before实现高级编号格式。

使用 CSS 的 ::marker 伪元素可以轻松自定义有序列表（ol）和无序列表（ul）中的项目符号或编号样式。这个伪元素专门用于控制列表项前的标记内容，比如颜色、大小、字体等。

基本语法与支持属性

::marker 可以应用于 li、summary 等生成标记的元素。目前支持的 CSS 属性有限，主要包括：

• color：改变标记颜色
• content（部分浏览器支持）：不能直接设置，但可通过其他方式间接影响
• font-size、font-family：调整字号和字体
• text-shadow：添加文字阴影效果

注意：不支持所有 CSS 属性，例如不能用 background-color 或 padding 直接作用于 ::marker。

修改颜色和字体大小

以下示例将有序列表的数字变为红色，并增大字号：

ol li::marker {
  color: red;
  font-size: 1.2em;
  font-weight: bold;
}

这样每个

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

ol {
  list-style: none; /* 关闭默认标记 */
  counter-reset: custom-counter;
}
ol li {
counter-increment: custom-counter;
}
ol li::before {
content: "[" counter(custom-counter) "] ";
color: green;
font-weight: bold;
margin-right: 8px;
}