Поиск

Стили для вложенных нумерованных списков 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 96
Следующая запись Ведущие нули у ol

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

Свойство list-style-type: decimal-leading-zero добавит ведущие нули к нумерации списка.
08.03.2019 303
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
19.09.2019 717
Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со...
28.08.2019 247
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
03.07.2019 738
Коды для названий языков ISO 639-2, расположенные в алфавитном порядке.
21.06.2019 350
В продолжении темы работы с массивами поговорим о типичной задаче – их сортировке. Для ее выполнения в PHP существует...
17.11.2017 11310