使用::marker伪元素实现类Markdown标题失效，原因何在？

通过以下代码可以实现类Markdown样式的标题：

h1::before{content:'# '}
h2::before{content:'## '}

<h1>Level-1 heading</h1>
<h2>Level-2 heading</h2>

但尝试用::marker伪元素实现时却无法生效，代码如下：

h1,h2,h3,h4,h5,h6{display:list-item}
h1::marker{content: '# '}
h2::marker{content: '## '}

<h1>Level-1 heading</h1>
<h2>Level-1 heading</h2>

请问这是什么原因？

原因与解决方案 #

核心原因 #

问题出在浏览器对::marker的默认行为限制：

• 当元素设置display: list-item后，浏览器会自动赋予默认的列表标记（比如圆点、数字），直接给::marker设置字符串内容会被浏览器的默认样式覆盖。
• 主流浏览器要求必须先清除默认的列表标记，才能让自定义的::marker内容生效。

修正后的代码 #

只需添加list-style-type: none覆盖默认标记，::marker的自定义内容就能正常显示：

h1,h2,h3,h4,h5,h6{
  display: list-item;
  list-style-type: none; /* 关键：移除默认列表标记 */
}
h1::marker{content: '# '}
h2::marker{content: '## '}
h3::marker{content: '### '}
h4::marker{content: '#### '}
h5::marker{content: '##### '}
h6::marker{content: '###### '}

<h1>Level-1 heading</h1>
<h2>Level-2 heading</h2>
<h3>Level-3 heading</h3>

补充说明：::marker仅支持有限的样式属性（如颜色、字体相关属性），但用来实现Markdown标题前缀这类需求完全够用。

内容的提问来源于stack exchange，提问作者user22996855