UL действует как OL => включая значение START

Question

Обычно это не так, но мы получаем неупорядоченный список из внешнего инструмента и должны с ним справиться. Вот почему я спрашиваю здесь.

Мне нужно, чтобы ul вел себя как ол. Легко сказать, list-style-type = "decimal". Но мне нужно было бы также иметь параметр START.

Если это невозможно сделать простым способом, я должен был бы построить что-то совершенно независимое, то есть

<li>
  <span>1.</span>
  <p>Text</p>
</li>

Я действительно хотел бы избежать этого, поэтому мой вопрос:

Можно ли использовать ul в качестве ol, включая начальное значение?

<ul start="17">

Answer 1

Вы можете использовать CSS Счетчики и определить начальную точку в counter-reset `CSS.

ul.my-list {
  list-style: none;
  counter-reset: item 17;
  /* number should always be 1 LESS than your required starting number */
}

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

<ul class="my-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Это должно быть удобно для пользователя на другой стороне стола. У него должен быть инструмент, который он определяет, например <list start="17"> Вот и все. Он не должен справляться с css или чем-либо другим.

В таком случае Q & A может предложить решение ... пользователь просто должен применить style="--start-xx"; встроенный стиль и CSS Пользовательские свойства могут обрабатывать остальное.

ul.my-list {
  list-style: none;
  counter-reset: item calc(var(--start) - 1) 
}

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

<ul class="my-list" style="--start:21">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<ul class="my-list" style="--start:10">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>