主页 / coding / 问题 / 78566949
Accepted
jsx97
Asked: 2024-06-02 23:49:54 +0800 CST

使用 '::marker' 伪元素创建类似 Markdown 的标题

  • 772

这有效，

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>

html

1 个回答

  1. Best Answer

    您没有列表项，您有标题参考：“选择列表项的标记框”，此处https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

    为了更多地说明为什么您需要一个容器来存放这些物品，我给了他们一个默认的 UL 样式；

    .list-container {
  display: block;
  list-style: disc outside none;
  margin: 1em 0;
  padding: 0 0 0 40px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: list-item;
}

h1::marker {
  content: '# ';
}

h2::marker {
  content: '## ';
}
    <div class="list-container">
  <h1>Level-1 heading</h1>
  <h2>Level-1 heading</h2>
</div>

    • 2

相关问题