::marker是CSS中用于选中列表项前默认符号的伪元素，可单独设置颜色、字体、内容等样式，但仅对display:list-item元素生效且兼容性有限。
什么是 ::marker，它能干什么
::marker 是 CSS 中用于选中列表项（<li>）前默认符号的伪元素，比如 ul 的圆点、ol 的数字。它不作用于整个 <li>，只管那个“小符号”本身——这意味着你可以单独改颜色、字体、内容、甚至用 content 替换它，而不会影响列表文本的排版或缩进。
注意：它只对 display: list-item 的元素生效（浏览器默认给 <li> 设了这个），且不能用于自定义 list-style-type 以外的符号生成逻辑（比如你想让每个 <li> 显示不同图标，仍需用 content 配合 counter 或属性）。
::marker 的 content 可以怎么写
它支持 content 属性，但限制比 ::before/::after 少：只能用字符串、counter()、counters()，**不能用 url() 或 attr()**。常见写法：
-
content: "→ ";—— 纯文本符号，注意空格会保留 -
content: counter(list-item, lower-roman) ". ";—— 复用内置计数器，配合ol的type属性（如type="i"） -
content: "•";—— 替换默认圆点，但字体和大小由font相关属性控制，不是 SVG
别指望靠 content: url(…) 插图；真要图标，得用 background-image + padding-left 模拟，或者改用 ::before。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么设置了 ::marker 却没效果
常见失效原因有三个：
- 父容器用了
list-style: none—— 这会直接干掉 marker，连::marker都没机会渲染，得改成list-style-type: none或保留类型 - 目标元素不是
<li>，而是自定义标签（比如<div class="item">）且没设display: list-item——::marker不认类名，只看计算后的 display 值 - 浏览器兼容性：Chrome 86+、Firefox 80+、Safari 15.4+ 支持，旧版 Safari（如 iOS 15.2）可能完全忽略，别在需要兼容老 iOS 的项目里依赖它
调试时，先检查 computed styles 里有没有 ::marker 规则被应用，再确认 display 和 list-style-type 是否符合前提。
::marker 和 list-style 属性的关系
list-style 是简写，它设置的 list-style-type 会影响 ::marker 的默认内容，但一旦你显式写了 ::marker { content: … }，就完全覆盖了 list-style-type 的值。不过这些属性依然起作用：
-
color在::marker上生效，控制符号颜色（包括自定义字符串） -
font-size、font-family影响符号渲染，比如用"→"时，选个无衬线字体更稳 -
list-style-position: inside会让::marker和文本同层，此时text-indent可能干扰对齐，建议统一用outside+padding-left控制缩进
真正麻烦的是垂直对齐：marker 默认基线对齐，但自定义字符高度不一，vertical-align 在 ::marker 上无效，只能靠 line-height 或 transform: translateY() 微调 —— 这部分没有标准解法，得试。
