::marker仅支持有限文本样式，如color、font-size等，不支持盒模型属性；content在ol中需配合counter()且兼容性差；推荐list-style:none+::before以兼顾兼容性与控制力。
::marker 能直接改列表符号的颜色、大小和内容，但不是所有浏览器都支持 content，也不是所有样式都能生效——别一上来就写 li::marker { background: red; margin: 5px; }，那肯定不 work。
哪些属性在 ::marker 上真正可用
它只接受有限的文本类样式，本质是“标记文本”的渲染层，不是盒子。能用的包括：
-
color（最稳定，所有支持::marker的浏览器都行） -
font-size、font-weight、font-style、text-shadow -
content：仅部分浏览器（Chrome ≥86、Firefox ≥89、Safari ≥15.4）支持，且对<ul></ul>的圆点替换效果极差；<ol></ol>中配合counter()略好些，但依然有兼容风险 - 不能用：
margin、padding、width、height、background、border—— 这些会直接被忽略
content 在 ol li::marker 中怎么写才可能生效
想把 “1.” 变成 “第1章：”，理论上可以这样写：
ol li::marker {
content: "第" counter(list-item) "章：";
}
但实际中：
- Chrome 和 Firefox 大部分版本支持，Safari 目前（2026 年中）仍不稳定，尤其嵌套
<ol></ol>时容易回退到默认数字 - 必须确保没有其他
list-style-type冲突（比如同时设了list-style-type: decimal;） - 不能用
content: url(...)或 emoji 字符直接赋值，::marker不解析图像或富文本
为什么多数项目还是推荐用 list-style: none + ::before
因为可控、兼容、可扩展。例如：
ul {
list-style: none;
padding-left: 0;
}
li::before {
content: "•";
color: #3498db;
font-size: 1.4em;
margin-inline-end: 0.5em;
display: inline-block;
width: 1em;
text-align: center;
}
好处很明显：
-
::before是完整伪元素，支持所有布局和视觉属性 - 能用
background-image、SVG data URL、emoji，甚至动态生成图标 - 可精确控制对齐（比如垂直居中、与文字 baseline 对齐）
- IE11 都支持，无需 polyfill
容易被忽略的语义与对齐细节
::marker 的优势在于它保留原生语义和自动对齐逻辑——浏览器知道它是“计数器的一部分”，所以缩进、换行、RTL 布局都更可靠。而 ::before 是手动模拟，容易出问题：
- 如果
li内容换行，::before默认不会跟随第一行缩进（需加vertical-align: top或line-height调整） - 屏幕阅读器对
::marker的处理更一致；::before的content若含关键信息，得补aria-hidden="true"避免重复读 - 用
counter()自定义编号时，::marker自动继承counter-increment，::before必须显式写counter(list-item)，漏写就断号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
