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

25.10.2019

11778

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