Например, добавить "1.2", чтобы в итоге список был:
1.2.1 1.2.2 1.2.3
и т.д.
2 ответа
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset
сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment
задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content
— генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol {
/* убираем стандартную нумерацию */
list-style: none;
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */
counter-reset: li;
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li;
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li, ".") ". ";
}
<ol>
<li>пункт
<ol>
<li>подпункт
</li>
<li>подпункт
<ol>
<li>подпункт</li>
<li>подпункт</li>
<li>подпункт</li>
</ol>
</li>
<li>подпункт</li>
</ol>
</li>
<li>пункт
<ol>
<li>подпункт</li>
<li>подпункт</li>
<li>подпункт
<ol>
<li>подпункт</li>
<li>подпункт</li>
<li>подпункт</li>
</ol>
</li>
<li>подпункт</li>
</ol>
</li>
<li>пункт</li>
<li>пункт</li>
</ol>
Подробнее про CSS счетчики и функцию counters()
на MDN
-
-
А почему это работает? Вы же написали псевдокласс, а не элемент (
li:before
).– ΝNL99327 авг 2022 в 12:38 -
-
1@ΝNL993, нет такого псевдокласса, как
:before
. Есть только псевдоэлемент::before
. С одним двоеточием before используется только для совместимости со старыми браузерами.– UModeL27 авг 2022 в 13:19 -
1@ΝNL993, насколько я знаю, таких элементов всего четыре:
:before
,:after
,:first-letter
и:first-line
. Хотя документация уверяет, что двойной синтаксис поддерживается всеми современными браузерами и для всех псевдоэлементов, лучше не стоит экспериментировать. Подробнее в примечании.– UModeL27 авг 2022 в 17:20
Другое дело если мы прибегним к помощи JavaScript-а...
document.querySelectorAll('li').forEach((e, i) => {
e.dataset.n = i+1
})
li::marker {
content: '1.2.'attr(data-n)' ';
}
<ol>
<li>Hello</li>
<li>World</li>
<li>123</li>
</ol>
К каждому li
просто добавляем атрибут data-n
со значением его индекса, а потом в CSS у маркера меняем контент на 1.2.(текущий индекс)
.
::marker
- это псевдо-элемент)