::marker不生效主因是三前提未同时满足：浏览器不支持（需Chrome 86+/Firefox 68+/Safari 15.4+）、li的display非list-item、或ul设了list-style:none；仅color/font-size等极少数属性有效，复杂定制须降级为list-style:none+li::before。
为什么 ::marker 在无序列表里不生效
直接给 ul li::marker 写样式却没反应？大概率是因为浏览器默认不渲染 ::marker 伪元素——它只在 display: list-item 元素上才被创建，而 ul 和 li 的默认行为依赖于 list-style-type 是否为非 none 值。如果父级 ul 设置了 list-style: none，子 li 就压根不会生成 ::marker。
实操建议：
- 确保
li的display是list-item（不要覆盖） - 不要在
ul上设list-style: none；如需隐藏默认符号，改用li::marker { content: "" } -
::marker只能控制内容、颜色、字体、文字对齐，不能设置宽高、背景或边框
::marker 能改哪些样式
它支持的 CSS 属性非常有限，超出范围的声明会被忽略。比如 background-color、padding、border 都无效，但下面这些可以：
-
content：可替换为任意字符串或 emoji，例如content: "•";或content: "→"; -
color：改变小圆点颜色（继承自li，但可单独覆盖） -
font-family/font-size：影响 symbol 渲染（尤其对 emoji 或自定义字符有用） -
text-align：仅在 marker 宽度大于默认时起作用（一般不用）
示例：
li::marker {
content: "★";
color: #ff6b6b;
font-size: 1.1em;
}
兼容性与降级方案
::marker 在 Chrome 86+、Firefox 89+、Safari 15.4+ 支持良好，但旧版 Safari（15.3 及更早）和所有 IE 完全不支持。如果必须兼容老 Safari，得回退到传统方式：
立即学习“前端免费学习笔记（深入）”；
- 用
li::before模拟 marker，同时设li { list-style: none; } - 注意
::before默认是display: inline，要加display: list-item才能对齐 baseline - 手动控制间距：用
margin-inline-end或margin-right分离 marker 和文本
典型 fallback 写法：
li {
list-style: none;
}
li::before {
content: "•";
color: #4a5568;
margin-inline-end: 0.5em;
}
用 content 插入 SVG 或图片行不行
不行。::marker 的 content 只接受字符串、attr()、counter() 和 url()（但 url() 在绝大多数浏览器中被忽略或报错）。想放 SVG 图标，只能走 li::before + background-image 或内联 svg 标签。
容易被忽略的一点：即使你用了 counter()，它也只对有序列表（ol）有意义；无序列表的 li 没有内置计数器，counter(li) 会返回空值——除非你手动用 counter-increment 定义一个。
