::marker 仅适用于 display: list-item 元素的列表项标记区，而 – 默认不是列表项，直接设置 display: list-item 后还需包裹在具备列表上下文的容器中（如 ul/ol 或自定义 list-style 容器），否则 ::marker 不会渲染。
`::marker` 仅适用于 `display: list-item` 元素的**列表项标记区**，而 `
`–`` 默认不是列表项，直接设置 `display: list-item` 后还需包裹在具备列表上下文的容器中（如 `ul`/`ol` 或自定义 `list-style` 容器），否则 `::marker` 不会渲染。
::marker 是 CSS Level 3 引入的伪元素，专用于控制列表项（list item）的标记内容（如项目符号、编号或自定义符号），其生效有严格前提：目标元素必须同时满足两个条件：
-
display计算值为list-item； - 所处环境提供有效的列表上下文（即父容器需具备
list-style相关属性，或浏览器隐式赋予列表语义）。
因此，以下写法无效：
h1, h2 { display: list-item; }
h1::marker { content: "# "; }
h2::marker { content: "## "; }<h1>Level-1 heading</h1> <h2>Level-2 heading</h2>
原因在于：<h1></h1> 和 <h2></h2> 虽被强制设为 list-item，但它们的父元素（如 ）默认 不具备列表布局上下文，浏览器不会为其生成 marker box，::marker 选择器自然不匹配、不渲染。
✅ 正确做法是显式创建一个具备列表语义的容器，并确保其 list-style 属性生效（即使设为 none，只要存在声明即可激活 marker 渲染机制）：
/* 创建一个“视觉隐形但语义有效”的列表容器 */
.markdown-headings {
display: block;
list-style: none; /* 隐藏默认符号，但保留 marker 上下文 */
margin: 0;
padding: 0;
}
/* 将标题转为列表项 */
.markdown-headings > h1,
.markdown-headings > h2,
.markdown-headings > h3,
.markdown-headings > h4,
.markdown-headings > h5,
.markdown-headings > h6 {
display: list-item;
margin: 0;
}
/* 为各级标题定制 marker 内容 */
.markdown-headings > h1::marker { content: "# "; }
.markdown-headings > h2::marker { content: "## "; }
.markdown-headings > h3::marker { content: "### "; }
.markdown-headings > h4::marker { content: "#### "; }
.markdown-headings > h5::marker { content: "##### "; }
.markdown-headings > h6::marker { content: "###### "; }
/* 可选：统一垂直间距，模拟 Markdown 渲染习惯 */
.markdown-headings > h1,
.markdown-headings > h2,
.markdown-headings > h3,
.markdown-headings > h4,
.markdown-headings > h5,
.markdown-headings > h6 {
margin-block-start: 1.2em;
margin-block-end: 0.8em;
}<div class="markdown-headings"> <h1>Level-1 heading</h1> <h2>Level-2 heading</h2> <h3>Level-3 heading</h3> </div>
⚠️ 注意事项：
-
不可滥用
::marker替代::before：::marker语义明确限定于列表标记，若仅需视觉前缀（如 Markdown 预览器中的#），::before更简洁、兼容性更好（支持所有现代浏览器，包括 Safari 14.1+）。 -
无障碍影响：
::marker生成的内容默认不进入可访问树（accessibility tree），屏幕阅读器通常不会朗读content值；若需语义化传达标题层级，应优先依赖原生<h1></h1>–<h6></h6>的语义，而非依赖视觉前缀。 -
深色模式适配：
::marker支持继承颜色与字体样式，可配合color和font-family统一控制前缀风格，例如：.markdown-headings > h1::marker { content: "# "; color: var(--md-heading-color, #333); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
总结：::marker 是语义精准但使用受限的工具——它不是通用的“前缀插入器”，而是列表系统的组成部分。在 Markdown 渲染场景中，除非你正在构建一个完全基于列表语义重构标题结构的特殊 UI（如可折叠大纲、带拖拽排序的文档编辑器），否则推荐优先使用 ::before 实现轻量、可控、无障碍友好的标题前缀效果。
