::marker不能设置width、height和background，因其非完整盒模型，CSS规范明确禁止；仅支持color、font-size等少数文本属性，无效属性包括background、width、height等；绕过方案是list-style:none+li::before模拟。
为什么 ::marker 不能设置 width、height 和 background
因为 ::marker 不是一个完整盒模型（box），它本质上是浏览器为列表项生成的“标记盒”（marker box），规范明确禁止它响应尺寸和背景类属性——不是浏览器没实现，而是 CSS 规范从设计上就不允许。
::marker 支持哪些属性？哪些绝对无效？
它只接受极少数与文本渲染直接相关的属性，且各浏览器支持程度不一：
-
color：所有现代浏览器（Chrome 89+、Firefox 89+、Safari 15.4+）都稳定支持 -
font-size：Chromium/Firefox 基本可用，但 Safari 15.4+ 才开始可靠生效；注意：某些版本仍会忽略 -
content：可替换符号，仅接受字符串（如"→ "）、counter()或attr()，不能嵌入 HTML 或图片 -
font-weight、text-shadow：部分生效，但对 disc/circle 这类图形符号基本无视觉变化 -
绝对无效的属性：
width、height、background、border、padding、margin、display、transform、line-height、vertical-align
想加背景色或控制大小，实际怎么绕过去？
当 ::marker 被规范卡死时，就得退回到手动模拟方案，这是目前最稳的生产级做法：
- 先关闭原生标记：
list-style: none - 用
li::before生成内容，此时可自由设置background、border-radius、width、height、transform等 - 有序列表需配合
counter，例如：li { counter-increment: item; } li::before { content: counter(item) ". "; } - 注意定位：若要精确右移数字，
li::before需设position: absolute+left偏移，同时li设position: relative
容易被忽略的关键点
很多人试了 ::marker { background: red; } 没反应，就以为是写法错或兼容性问题——其实根本原因是规范不允许。更隐蔽的是：font-size 在某些 Chrome 版本中看似生效，实则只是间接影响了符号在行内的占位，真正可靠的缩放方式反而是 transform: scale()（配合 transform-origin: center left），但这本身也不在 ::marker 的合法属性列表里，得靠 li::before 实现。
立即学习“前端免费学习笔记（深入）”；
