怎样用css伪元素::marker自定义列表符号_修改li标签默认圆点样式

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《怎样用css伪元素::marker自定义列表符号_修改li标签默认圆点样式》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

::marker仅在原生列表项（ul/ol未设list-style:none）上生效，可改color、content等有限属性，不可改margin/padding/display；content支持字符串和counter(list-item)，不支持url()或自定义计数器。

用 ::marker 替换 li 默认圆点，前提是列表类型得是 list-style-type: disc | circle | square | decimal 等内置值

浏览器只对原生支持的 list-style-type 值启用 ::marker 伪元素。如果你写了 list-style: none 或者用 background-image 手动模拟列表符号，::marker 就不会生效——它不作用于“被清空”或“被覆盖”的列表项。

所以第一步必须保留原生列表行为：

• ul 或 ol 不能设 list-style: none
• 不要在 li 上用 ::before 伪造符号（否则语义和可访问性都受损）
• 推荐写法：ul { list-style-type: disc; }，再用 li::marker 覆盖

li::marker 能改什么、不能改什么

目前（Chrome 89+、Firefox 82+、Safari 15.4+）支持修改的属性非常有限：

• ✅ 支持：color、font-size、font-family、content（仅限字符串和简单计数器函数如 counter(list-item)）
• ❌ 不支持：margin、padding、display、background、transform、border
• ⚠️ 注意：content 中不能用 url() 或渐变，也不能嵌套其他伪元素

例如想把圆点换成红色三角形，只能靠字符：

li::marker {
  content: "▶ ";
  color: #e63946;
  font-size: 1.2em;
}

用 content + counter() 实现自定义编号（适用于 ol）

ol 的 ::marker 可以调用 counter(list-item) 获取序号，还能拼接前缀/后缀：

• 默认数字后加点：content: counter(list-item) ".";
• 中文编号：content: counter(list-item, cjk-ideographic) "、";
• 带括号的英文字母：content: "(" counter(list-item, lower-alpha) ")";
• ⚠️ 不要写 counter(my-counter) —— 自定义计数器名无效，::marker 只认 list-item

如果需要更复杂的编号逻辑（比如跳过某项、重置起始值），得配合 counter-reset 和 counter-increment 在 ol 或 li 上设置，::marker 本身不控制计数行为。

兼容性兜底：不是所有浏览器都支持 ::marker

IE 完全不支持；旧版 Safari（

• 先写 ::marker 样式作为现代浏览器增强
• 再用 li 的 text-indent + padding-left 微调整体缩进，避免符号偏移失衡
• 若必须支持老环境，退回到 li::before { content: "• "; } 方案（但会丢失语义和屏幕阅读器对列表结构的识别）

真正容易被忽略的是：当 li 内容换行时，::marker 的对齐方式由 list-style-position 控制（inside 或 outside），而这个属性依然有效——别以为用了 ::marker 就能绕过它。

到这里，我们也就讲完了《怎样用css伪元素::marker自定义列表符号_修改li标签默认圆点样式》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！