::marker 伪元素在 Chrome 早期版本中未实现或支持不全，导致 color 属性无效；现代浏览器已支持，但需注意兼容性及 display: list-item 的默认行为影响。
为什么 ::marker 设置颜色无效？
常见现象是写了 li::marker { color: red; } 却没生效，尤其在 Chrome 早期版本（::marker 的支持有限，且默认继承父级 color，但某些 UA 样式会强制覆盖，导致直接设 color 被忽略。
- Chrome 90+、Firefox 89+、Safari 15.4+ 才开始稳定支持
color和font-size - 旧版 Safari 仅支持
content替换符号，不支持样式微调 -
::marker无法设置margin、padding或背景，仅限少数文本相关属性
用 marker 属性替代伪元素更可靠
W3C 推荐的现代方案是使用 marker 属性（配合 list-style-type），它比 ::marker 兼容性更好，且能控制符号大小与颜色，无需伪元素。
- 需搭配
display: list-item和显式list-style-type -
marker是一个独立 CSS 属性，不是伪元素，作用于整个标记盒 - 当前仅 Chromium 系浏览器（Chrome/Edge 111+）和 Firefox 117+ 支持
li {
display: list-item;
list-style-type: disc;
marker: disc / red / 1.2em;
}
其中 marker 值格式为：<list-style-type> / <color> / <size>，三者顺序固定，缺省可写 disc / red（此时 size 继承父级 font-size）。
兼容老浏览器的降级方案：用 content + ::before
当目标环境包含 IE、旧 Safari 或低版本 Chrome 时，::marker 和 marker 都不可用，必须手动模拟符号。
立即学习“前端免费学习笔记（深入）”；
- 移除原生标记：
list-style: none - 用
::before插入 Unicode 符号或自定义内容 - 通过
color、font-size、line-height控制外观
li {
list-style: none;
position: relative;
padding-left: 1.5em;
}
li::before {
content: "•";
color: #ff6b6b;
font-size: 1.1em;
position: absolute;
left: 0;
line-height: 1;
}
容易被忽略的关键限制
::marker 和 marker 都不能改变符号与文字之间的间距 —— 这个距离由浏览器 UA 样式硬编码，无法用 margin 或 gap 调整。如果设计要求精确对齐或紧凑排版，只能用 ::before 方案并手动调 left 和 top。
另外，marker 属性不支持渐变色、url() 图片或 SVG 内联内容；若需图标化列表项，仍得回归 ::before + background-image 或内联 <svg>。
