Маркер нумерованных списков

Question

Возможно ли привести маркер нумерованного списка к такому виду и как?

1.
2.
  2.1.
  2.2.
    2.2.1.
...

Answer 1

Отображение вложенности каждого пункта нумерованного списка легко сделать, используя CSS счетчики. Запустите пример ниже (CSS-свойства после комментариев можно опустить - на нумерацию они не влияют):

ol {
  list-style: none;
  counter-reset: li;
  /* оформление */
  font-size: 12px;
  font-family: monospace;
  padding-left: 2ch;
}
ol li {
  /* оформление */
  font-family: sans-serif;
  color: blue;
}
ol li:before {
  counter-increment: li;
  content: counters(li, ".") ". ";
  /* оформление */
  font-family: monospace;
  color: red;
}

<ol>
  <li>Маркеры для многоуровневых вложенных списков,
    <ol>
      <li>довольно легко привести к нужному виду,</li>
      <li>если использовать, для автоматической</li>
      <li>нумерации, счётчики, которые нужно вставить</li>
      <li>в свойство <code>content</code> псевдоэлемента пункта списка.</li>
    </ol>
  </li>
  <li>-----------------------------------------------</li>
  <li>Для этого необходима функция <code>counter<mark>s</mark>()</code>
    <ol>
      <li>с желаемым символом-разделителем.</li>
      <li><i>(Важно! Не пропустите букву S в имени функции.)</i>
        <ol>
          <li>Вся "магия" в этой функции и CSS-стилях.</li>
          <li>В HTML, разметка списка не требует изменений.</li>
        </ol>
      </li>
      <li>-----------------------------------------</li>
    </ol>
  </li>
</ol>

Более подробную информацию, по работе счётчиков и их применению, можно найти в документации и примерах.

Answer 2

ol {
  counter-reset: counter;
  list-style-type: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") ". ";
}

<ol>
  <li>item</li>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <ol>
        <li>item</li>
        <li>item</li>
      </ol>
    </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

БЛОГ НА HUSL

Маркер нумерованных списков

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