Как сделать сквозную нумерацию неупорядоченных списков?

Question

[Макс]

Есть странная задача: пронумеровать много неупорядоченных списков, которые разделены параграфами.

Хотелось бы это сделать средствами CSS.
К HTML доступа практически нет, т.к. контент динамически выгружается из неизвестных мне систем.
Пример кода:

<p>Писатели:</p>
<ul>
    <li>Пушкин</li>
    <li>Лермонтов</li>
    <li>Чехов</li>
</ul>
<p>Художники:</p>
<ul>
    <li>Винсент ван Гог</li>
    <li>Сальвадор Дали</li>
    <li>Эдвард Мунк</li>
</ul>

Надо получить результат:

Писатели:
    1. Пушкин
    2. Лермонтов
    3. Чехов

Художники:
    4. Винсент ван Гог
    5. Сальвадор Дали
    6. Эдвард Мунк

Answer 1

[director-rentv]

В этом участке кода получилось добиться сквозной нумерации таким кодом:

ul:first-of-type {
  counter-reset: cnt 0;
}

li {
  counter-increment: cnt 1;
}

li::before {
  content: counter(cnt) ". ";
}

Comments

[Макс]

director-rentv Спасибо вам большое. Пойду более подробно изучать свойства. Вы очень помогли.

[Сергей delphinpro]

а если вложенный пункт будет?

[director-rentv]

Ну это уже зависит от задачи,
к примеру, если вложенность ещё одна может быть, и в ней свой порядок, то можно следующим кодом (что-то мне подсказывает, что можно проще, но я не додумался ещё)

<p>Писатели:</p>
  <div class="box">
    <p>Писатели:</p>
    <ul>
        <li>Пушкин</li>
        <li>Лермонтов</li>
        <li>Чехов</li>
        <li>
          <ul>
              <li>Пушкин</li>
              <li>Лермонтов</li>
              <li>Чехов</li>
          </ul>
        </li>
    </ul>
</div>

<div class="box">
    <p>Художники:</p>
    <ul>
        <li>Винсент ван Гог</li>
        <li>Сальвадор Дали</li>
        <li>Эдвард Мунк</li>
        <li>
          <ul>
              <li>Пушкин</li>
              <li>Лермонтов</li>
              <li>Чехов</li>
          </ul>
        </li>
    </ul>
</div>

body {
      counter-reset: cnt 0;
    }
    
    li {
      counter-increment: cnt 1;
    }

    li::before {
      content: counter(cnt) ". ";
    }

    li>ul {
      counter-reset: cnt-2 0;
    }

    li>ul>li {
      counter-increment: cnt-2 1;
    }
    li>ul>li::before {
      content: counter(cnt-2) ". ";
    }