Ведущие нули у ol

08.03.2019

7656

Decimal-leading-zero

Свойство list-style-type: decimal-leading-zero добавит ведущие нули к нумерации списка <ol>.

<ol>
	<li>Первая строка</li>
	<li>Вторя строка</li>
	<li>Третья строка</li>
	<li>Четвертая строка</li>
	<li>Пятая строка</li>
	<li>Шестая строка</li>
	<li>Седьмая строка</li>
	<li>Восьмая строка</li>
	<li>Девятая строка</li>
	<li>Десятая строка</li>
</ol>

HTML

ol {
	list-style-type: decimal-leading-zero;
}

CSS

Счетчик counter

Если нужно задать отдельные стили для нумерации, то придется использовать счётчик и выводить нумерацию через :before.

<ol class="ol_zeros">
	<li>Первая строка</li>
	<li>Вторя строка</li>
	<li>Третья строка</li>
	<li>Четвертая строка</li>
	<li>Пятая строка</li>
	<li>Шестая строка</li>
	<li>Седьмая строка</li>
	<li>Восьмая строка</li>
	<li>Девятая строка</li>
	<li>Десятая строка</li>
</ol>

HTML

.ol_zeros {
	counter-reset: num;
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0 0 0 0;
}
.ol_zeros li {
	counter-increment: num;
	position: relative;
	margin: 5px 0 5px 40px;
	padding: 0 0 0 0;
	font-size: 16px;
	line-height: 20px;
}
.ol_zeros li:before {
	content: counter(num) ".";
	color: #777;
	position: absolute;
	left: -40px;
	top: 0;
	text-align: right;
	font-family: Courier New, monospace;
	font-size: 20px;
}
.ol_zeros li:nth-child(-n+9):before {
	content: "0" counter(num) ".";
}

CSS

Результат:

Ещё один вариант без точек в нумерации:

.ol_zeros {
	counter-reset: num;
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0 0 0 0;
}
.ol_zeros li {
	counter-increment: num;
	position: relative;
	margin: 5px 0 5px 40px;
	padding: 0 0 0 0;
	font-size: 16px;
	line-height: 20px;
}
.ol_zeros li:before {
	content: counter(num);
	color: #777;
	position: absolute;
	left: -40px;
	top: 0;
	text-align: right;
	font-family: Courier New, monospace;
	font-size: 24px;
	font-weight: bold;
}
.ol_zeros li:nth-child(-n+9):before {
	content: "0" counter(num);
}

CSS