::marker伪元素用于自定义列表标记样式，支持颜色、字体等基本属性调整，适用于li元素，如改变颜色和字号；但不支持content设置文本内容，复杂定制需结合::before与counter实现，且仅限部分样式属性，布局类需用::before模拟，现代浏览器兼容性良好。
在CSS中，::marker 伪元素用于自定义列表项前面的标记符号，比如有序列表（ol）中的数字或无序列表（ul）中的圆点。使用 ::marker 可以灵活控制标记的样式，而无需依赖传统的 list-style-image 或 JavaScript。
基本用法
::marker 主要应用于 li 元素，也可以作用于其他生成标记的元素（如 summary）。你可以修改颜色、内容、字体等属性。
示例：改变列表标记的颜色和字体大小
li::marker { color: blue; font-size: 1.2em; }自定义标记内容
CSS 的 ::marker 不支持直接通过 content 属性设置任意文本（这一点不同于 ::before），但可以通过计数器（counter）结合 ::before 实现更复杂的自定义。不过对于简单样式调整，::marker 非常实用。
立即学习“前端免费学习笔记（深入）”；
你仍然可以结合 counter 来控制有序列表的显示：
ol { counter-reset: custom-counter; } li { list-style: none; } li::before { counter-increment: custom-counter; content: "第" counter(custom-counter) "章："; margin-right: 8px; color: green; }
仅使用 ::marker 的限制与建议
::marker 能修改的属性有限，仅包括：
- color
- font 属性（font-size, font-weight 等）
- text-combine-upright, unicode-bidi
- 白空间相关（如 white-space）
不能设置背景图、边框、padding/margin 等布局属性。如果需要更复杂效果，推荐使用 ::before 配合 content 和 counter。
实际应用场景
比如你想让无序列表的项目符号变成短横线，并改为红色：
ul li::marker { content: "–"; color: red; font-size: 1.1em; }注意：虽然设置了 content，但在多数浏览器中 ::marker 的 content 并不被完全支持，上述写法可能无效。更稳妥的方式是隐藏默认符号，用 ::before 模拟：
ul { list-style: none; } ul li::before { content: "–"; color: red; margin-right: 8px; display: inline-block; width: 1em; }基本上就这些。对于简单的颜色和字体调整，::marker 很方便；若要深度定制，还是得靠 ::before 和计数器机制。兼容性方面，现代浏览器都支持 ::marker，但老版本IE不支持。使用时注意降级处理。
