CSS伪元素::marker自定义列表符号教程

CSS伪元素`::marker`为开发者提供了精细化控制列表符号样式的全新方式，不仅能轻松调整有序和无序列表中数字、圆点等标记的颜色、大小与字体权重，还能通过结合`list-style: none`与`::before`实现完全自定义的符号效果，或联动CSS计数器打造兼具逻辑正确性与视觉一致性的高级有序列表——相比传统的`list-style-type`，它带来更现代、更灵活、更符合设计需求的样式掌控力。

使用 ::marker 伪元素可以轻松自定义有序列表（

）和无序列表（
）中的项目符号样式。它作用于列表项（
• ）前面的标记部分，比如数字、圆点或其它符号。

  基本语法与支持属性

  ::marker 是一个伪元素，可以直接在 CSS 中为 li 元素设置样式。目前支持的 CSS 属性有限，主要包括：

  • color：改变标记颜色
  • content（部分浏览器不支持）
  • font-size、font-weight 等字体相关属性
  • text-shadow

  注意：不能通过 ::marker 设置背景图或复杂内容，某些属性如 width、margin 等也不支持。

  修改颜色和大小

  你可以调整列表符号的颜色和字体大小，使其更符合页面设计风格：

  li::marker {
    color: #e74c3c;
    font-size: 1.2em;
    font-weight: bold;
  }
  

  这段代码会让所有 li 的编号或符号变成红色、加粗并稍大一些。

  自定义无序列表符号

  虽然不能直接用 content 替换符号（目前多数浏览器尚未支持），但可以通过其他方式模拟。例如隐藏原有符号并用 ::before 添加自定义内容：

  ul li {
    list-style: none; /* 去掉默认符号 */
  }
  <p>ul li::before {
  content: "• ";
  color: blue;
  font-size: 1.3em;
  margin-left: -1em;
  }</p>

  这种方法适用于需要完全控制符号样式的场景。

  配合计数器实现高级有序列表样式

  对于

  ，你也可以结合 CSS 计数器和 ::marker 达到更好效果：

  ol {
    counter-reset: section;
  }
  <p>ol li {
  counter-increment: section;
  }</p><p>ol li::marker {
  color: purple;
  font-weight: bold;
  }</p>

  这样依然保留原有编号逻辑，同时美化显示样式。

  基本上就这些。::marker 提供了比传统 list-style-type 更灵活的视觉控制，适合现代布局中对细节的微调。

  好了，本文到此结束，带大家了解了《CSS伪元素::marker自定义列表符号教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！
  继续访问