Início / coding / Perguntas / 78566949
Accepted
jsx97
Asked: 2024-06-02 23:49:54 +0800 CST

Usando o pseudoelemento '::marker' para criar títulos semelhantes ao Markdown

  • 772

Isso funciona,

h1::before{content:'# '}
h2::before{content:'## '}
<h1>Level-1 heading</h1>
<h2>Level-2 heading</h2>

mas tenho a sensação de que seria mais correto usar ::markeraqui e, por algum motivo, não funciona para mim. Por que é que?

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 respostas

  1. Best Answer

    Você não tem itens de lista, você tem títulos ref: "seleciona a caixa de marcador de um item de lista" aqui https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

    Para elucidar mais por que você precisa de um contêiner para esses itens, dei a eles um com o estilo UL padrão;

    .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

relate perguntas