Использование псевдоэлемента '::marker' для создания заголовков в стиле 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>
Ответы 1
У вас нет элементов списка, у вас есть заголовки ref: «выбирает маркер элемента списка» здесь 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>Это работает, но проблема в контейнере. Я добавил пример, чтобы CSS контейнера работал так, как вы ожидали.
Большое спасибо за обновление ответа, Марк. Кажется, единственный вариант создать такие заголовки без изменения HTML — это использовать ::before, верно?
@ jsx97 - Нет, вы можете использовать ::marker без контейнера. Основная проблема — оставить место слева для маркера. Вы можете использовать margin-inline-start: 40px; в заголовке, чтобы освободить место (или margin-left, если хотите), или использовать list-style-position: inside, чтобы вам не нужно было покидать пространство.
@Alohci Справедливый комментарий относительно маржи. Я часто вижу, как люди используют LI, а затем работают над удалением этого интервала и стиля (маркеров и т. д. для маркера), когда элемент без них, такой как span или div, может быть более подходящим.
Но затем: «Это работает с любым элементом или псевдоэлементом, предназначенным для отображения:
list-item, например с элементами<li>и<summary>». Поэтому я ожидал, что::markerбудет работать и для заголовков, потому что я добавил к нимdisplay: list-item.