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

本文详解为何 ::marker 不能直接作用于 – 标签，以及如何通过语义合规的方式（结合 display: list-item 与容器约束）安全、可维护地模拟 Markdown 标题标记（如 #、##）。

本文详解为何 `::marker` 不能直接作用于 `

`–`

` 标签，以及如何通过语义合规的方式（结合 `display: list-item` 与容器约束）安全、可维护地模拟 Markdown 标题标记（如 `# `、`## `）。

CSS 的 ::marker 伪元素仅适用于具有列表项语义的元素——即必须满足两个前提：

元素本身或其父容器需具备列表上下文（如 display: list-item）；
该元素应处于一个被浏览器识别为“列表项”的渲染流中（例如 <li>，或显式设为 list-item 的任意元素）。

而原生 HTML 标题标签 <h1></h1>–<h6></h6> 默认为块级元素（display: block），不具备列表项语义，因此即使强制设置 display: list-item，若缺乏合适的列表容器（如 <ul></ul>、<ol></ol> 或模拟列表行为的 display: list-item 父容器），浏览器将忽略 ::marker 样式，导致内容不渲染。

✅ 正确做法是：显式构建列表上下文，而非依赖标题标签的默认语义。以下是一个健壮、语义清晰且可复用的实现方案：

/* 创建一个语义中立但具备列表行为的容器 */
.markdown-heading-list {
  display: block;
  margin: 0;
  padding: 0;
  /* 可选：禁用默认列表符号，仅保留 marker 内容 */
  list-style: none;
}

/* 将标题转为列表项，并统一控制缩进与间距 */
.markdown-heading-list > h1,
.markdown-heading-list > h2,
.markdown-heading-list > h3,
.markdown-heading-list > h4,
.markdown-heading-list > h5,
.markdown-heading-list > h6 {
  display: list-item;
  margin: 1.2em 0 0.8em;
  line-height: 1.4;
}

/* 为各级标题注入 Markdown 风格前缀 */
.markdown-heading-list > h1::marker { content: "# "; }
.markdown-heading-list > h2::marker { content: "## "; }
.markdown-heading-list > h3::marker { content: "### "; }
.markdown-heading-list > h4::marker { content: "#### "; }
.markdown-heading-list > h5::marker { content: "##### "; }
.markdown-heading-list > h6::marker { content: "###### "; }

/* 可选：微调 marker 对齐（如左对齐、等宽字体） */
.markdown-heading-list > h1::marker,
.markdown-heading-list > h2::marker,
.markdown-heading-list > h3::marker,
.markdown-heading-list > h4::marker,
.markdown-heading-list > h5::marker,
.markdown-heading-list > h6::marker {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: bold;
}

对应 HTML 结构如下（关键：标题必须嵌套在 .markdown-heading-list 容器内）：

Markdown Viewer

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

下载

<div class="markdown-heading-list">
  <h1>Level-1 heading</h1>
  <h2>Level-2 heading</h2>
  <h3>Level-3 heading</h3>
</div>

⚠️ 注意事项：

不可滥用 display: list-item：直接对全局 <h1></h1>–<h6></h6> 设置 display: list-item 会破坏文档大纲（<h1></h1> 不再是顶级节标题），影响可访问性（如屏幕阅读器无法正确识别层级结构）和 SEO。务必限定作用域（如使用 .markdown-heading-list > h1）。
::marker 不支持复杂布局：它仅接受 content、font-*、color、text-align 等有限属性；无法设置 margin、padding 或 background（部分浏览器实验性支持 background-color，但兼容性差）。
替代方案对比：::before 虽更灵活（可自由定位、添加背景/图标），但属于装饰性插入，语义上不如 ::marker 明确表达“标记前缀”意图；::marker 是 W3C 推荐用于列表标记的标准机制，更适合强调结构化前缀语义。