li::marker { color: red; }没反应主因是三个前提至少一个失效：ul/li设list-style:none关闭渲染通道、li的display非list-item、或浏览器不支持（Safari15.3及更早等静默忽略）；content仅支持字符串或counter()，属性仅color/font-size等少数有效。
为什么li::marker { color: red; }写了没反应
不是代码写错，而是三个前提至少崩了一个：ul或li上设了list-style: none（直接关闭::marker通道）、li的计算display值不是list-item（比如被flex容器或display: block覆盖）、浏览器不支持（Safari 15.3 及更早、iOS 15.2 及更早微信 X5 内核会静默忽略整条规则）。Chrome 86+、Firefox 68+、Safari 15.4+ 才真正识别，且 DevTools 里看不到::marker面板就说明它根本没加载。
content怎么写才不翻车
content是唯一能“换掉”圆点的出口，但语法极敏感，错一个字符就失效：
- ✅ 正确：
content: "• ";（双引号内末尾带空格，避免文字粘连） - ✅ 更稳妥：
content: "\2022";（Unicode 实心圆，无字体依赖） - ❌ 错误：
content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建工具中被删）、content: url(./dot.svg)（url()完全不支持） - emoji 如
"→ "在 Firefox 中宽度不均，可加font-size: 0.9em微调对齐
::marker能设什么、不能设什么
它不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错，也不生效）：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如font: bold 1.2em sans-serif）、text-align（仅对多字符content生效） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height、vertical-align - ⚠️ 小心使用：
font-weight在 Safari 16.4+ 才支持；font-family单独写无效，必须包在font简写里
想用 SVG 或图标圆点？别碰 ::marker
::marker 不支持 background-image、url() 或内联 SVG，content 也只接受字符串或 counter()，不能插图片。所以 SVG 圆点、箭头、勾选等复杂符号，必须走标准降级路径：
立即学习“前端免费学习笔记（深入）”；
- 先加
list-none清除默认样式，否则 Safari 会叠出两个符号 - 用
li::before：设display: inline-block+vertical-align: text-bottom保证基线对齐 - 内容用 data URL 编码的 SVG，或 Unicode 字符配合
font-size控制尺寸 - 间距靠
margin-right或text-indent调，别指望::marker的padding
真正可控的路径永远是：list-none + ::marker 或 ::before 显式接管。别试图让 list-disc 响应 marker:text-red-500——它底层是操作系统级“黑盒符号”，CSS 进不去。
