如何正确使用 ::marker 伪元素实现 Markdown 风格标题前缀

::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 Viewer

用于 AI 配对编辑的实时 Markdown 查看器，协作时更新即时渲染，支持任意 AI 代理和网页浏览器。

下载

/* 创建一个“视觉隐形但语义有效”的列表容器 */
.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 实现轻量、可控、无障碍友好的标题前缀效果。