[SOLVED] Using '::marker' pseudo-element to create Markdown-like headings

Using '::marker' pseudo-element to create Markdown-like headings

This works,

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

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

but I have a feeling it would be more correct to use ::marker here, and for some reason it doesn't work for me. Why is that?

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>

Solution

You do not have list items you have headings ref: "selects the marker box of a list item" here https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

To elucidate more why you need a container for those items here I gave them one with the default UL style;

.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>