Как добавить псевдоэлемент перед маркером списка?

Question

Например, добавить "1.2", чтобы в итоге список был: 1.2.1 1.2.2 1.2.3 и т.д.

Answer 1

Другое дело если мы прибегним к помощи 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.(текущий индекс) .

Answer 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

БЛОГ НА HUSL

Как добавить псевдоэлемент перед маркером списка?

Ответы (2 шт):