<div class="content-container">
	<h1>Increment by +2</h1>

	<ul class="list">
		<li class="list-item">
			<span class="list-item__counter"></span>
			<span class="list-item__text">First Item</span>
		</li>
		<li class="list-item">
			<span class="list-item__counter"></span>
			<span class="list-item__text">Second Item</span>
		</li>
		<li class="list-item">
			<span class="list-item__counter"></span>
			<span class="list-item__text">Third Item</span>
		</li>
	</ul>
</div>

	.content-container {
		.list {
			counter-reset: counter-name;

			.list-item {
				.list-item__counter {
					&:before {
						counter-increment: counter-name 2;
						content: counter(counter-name);
					}
				}
			}
		}
	}

$color__composed-primary: #ffcb38;
.content-container {
	height: 100vH;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;

	h1 {
		margin: 0;
	}

	.list {
		max-width: 125px;
		overflow: visible;
		-webkit-padding-start: 0;

		.list-item {
			list-style: none;
			display: flex;
			align-items: center;

			.list-item__counter {
				margin-right: 5px;

				&:not(:last-child) {
					margin-bottom: 5px;
				}

				&:before {
					$counter-size: 25px;
					height: $counter-size;
					width:  $counter-size;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid $color__composed-primary;
					border-radius: 50%;
					background-color: $color__composed-primary;
				}
			}
		}
	}
}