Шаблон номера для нумерованного списка

236

30 ноября 2017, 00:11

Нужен нумерованный список следующего вида:

R001. текст
R002. текст
..
R123. текст

Требования такие:

Маркер элемента списка состоит из строки и порядкового номера.
Строка не меняется, но её нужно задать явно.
Порядковый номер дополнен нулями до нужной разрядности, её тоже нужно задать явно.

Как реализовать это на CSS?

Answer 1

Вариант с нулями

ol.requirement{ 
  padding-left: 0; 
} 
ol.requirement li { 
  counter-increment: req; 
  list-style-type: none; 
} 
 
ol.requirement li:before { 
  content: "R0" counter(req, decimal-leading-zero) ". "; 
} 
 
ol.requirement li:nth-child(n+100):before { 
  content: "R" counter(req, decimal-leading-zero) ". "; 
}

<ol class="requirement"> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
	<li>text</li> 
</ol>

Answer 2

Не смог только настроить количество нулей и в новом списке слишком большой отступ.

ol.requirement li { 
  counter-increment: req; 
  list-style-type: none; 
} 
 
ol.requirement li:before { 
  content: "R" counter(req, decimal-leading-zero) ". "; 
}

Специальный список: 
 
<ol class="requirement"> 
  <li>text</li> 
  <li>text</li> 
</ol> 
 
Для сравнения, обычный список: 
 
<ol> 
  <li>text</li> 
  <li>text</li> 
</ol>