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

Свойство 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

Если нужно задать отдельные стили для нумерации, то придется использовать счётчик и выводить нумерацию через :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

Результат:

08.03.2019, обновлено 14.02.2020
4345

Комментарии

, чтобы добавить комментарий.

Другие публикации

Стили для нумерованных списков ol
Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и...
24990
+12
Стили для вложенных нумерованных списков ol
В продолжении темы нумерованных списков ol, пример стилизации и вывода нумерации вложенных элементов.
5893
0
Input type number
В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности...
29246
+10
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
40695
+20
Получить фото из Instagram без API
Так как Instagram и Fasebook ограничили доступ к API, а фото с открытого аккаунта всё же нужно периодически получать и...
21365
+7
Номер телефона на сайте
В последнее время нельзя пренебрегать кликабельными номерами телефонов т.к. количество клиентов, использующих мобильные телефоны превысило десктопы.
63259
+9