Стили для вложенных нумерованных списков ol

В продолжении темы нумерованных списков ol, пример стилизации и вывода нумерации вложенных элементов.

Для вывода нумерации используются три счетчика counter():

/* 1-й уровень */
ol {
	ounter-reset: num;
}
li {
	counter-increment: num;
}
li::before {
	content: counter(num);
}

/* 2-й уровень */
ol ol {
	counter-reset: num2;
}
ol ol > li {
	counter-increment: num2;
}
ol ol > li::before {
	content: counter(num) '.' counter(num2);
}

/* 3-й уровень */
ol ol ol {
  counter-reset: num3;
}
ol ol ol > li {
	counter-increment: num3;
}
ol ol ol > li::before {
	content: counter(num) '.' counter(num2) '.' counter(num3);
}
CSS

HTML верстка:

<ol>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus, erat.</li>
	<li>
		Fusce ac egestas tortor. Suspendisse fringilla velit quis nunc ornare.
		<ol>
			<li>
				Quisque sed congue eros, eu lacinia mauris. Phasellus non finibus mi.
				<ol>
					<li>Nunc sem lorem, hendrerit in luctus eget, egestas in mi.</li>
					<li>Suspendisse mollis nunc vitae mi luctus, eu viverra est.</li>
				</ol>
			</li>
			<li>Nam pharetra consectetur egestas. Sed nec auctor odio. In viverra.</li>
		</ol>
	</li>
	<li>Vivamus pulvinar a libero tempor auctor. Duis commodo turpis at turpis rhoncus.</li>
</ol>
HTML

Полный CSS:

ol {
	list-style: none;
	font-size: 16px;
	padding: 0;
	margin: 10px 0;
}
li {
	margin: 0;
	padding: 0 0 10px 40px;
	position: relative;
	line-height: 20px;
}
li::before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background: #fff;
	color: #000;
	text-align: center;
	line-height: 32px;
	font-size: 12px;
	border-radius: 50%;
}

/* 1-й уровень */
ol {
	counter-reset: num;
}
ol > li {
	counter-increment: num;
}
ol > li::before {
	content: counter(num);
	border: 1px solid #ef6780;
}

/* 2-й уровень */
ol ol {
	counter-reset: num2;
}
ol ol > li {
	counter-increment: num2;
}
ol ol > li::before {
	content: counter(num) '.' counter(num2);
	border: 1px solid #8a41fd;
}

/* 3-й уровень */
ol ol ol {
  counter-reset: num3;
}
ol ol ol > li {
	counter-increment: num3;
}
ol ol ol > li::before {
	content: counter(num) '.' counter(num2) '.' counter(num3);
	border: 1px solid #368c49;
}
CSS

Результат:

Вариант без подпунктов

ol {
	list-style: none;
	font-size: 16px;
	padding: 0;
	margin: 10px 0;
	counter-reset: num;
}
li {
	margin: 0;
	padding: 0 0 10px 40px;
	position: relative;
	line-height: 20px;
	counter-increment: num;
}
li::before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background: #fff;
	color: #000;
	text-align: center;
	line-height: 32px;
	font-size: 12px;
	border-radius: 50%;
	content: counter(num);
	border: 1px solid #ef6780;
}
CSS

Результат:

25.10.2019
Следующая запись Ведущие нули у ol

Комментарии

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

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

Ведущие нули у ol
Свойство list-style-type: decimal-leading-zero добавит ведущие нули к нумерации списка.
1185
0
CSS-стили для списков dl, dt, dd
Элементы dl, dt, dd предназначенных для создания списка определений. dl – общий контейнер, dt – термин, dd –...
745
+1
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
3268
+2
Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
5157
+3
Меню-подсказка на затемненном фоне
Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со...
1291
+2
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
5657
+3