::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 就能绕过它。
