ol numbers + bg

by justfeelin

HTML

<ol class="list1">
			<li><span>линк</span></li>
			<li><span>линк</span>
				<ol class="list">
					<li><span>линк</span></li>
					<li><span>линк</span></li>
					<li><span>линк</span></li>
					<li><span>линк</span></li>
				</ol>
			</li>
			<li><span>линк</span></li>
			<li><span>линк</span></li>
		</ol>

CSS

.list li,.list1 li {
	font-size: 20px;
	position: relative;
	margin: 2px 0;
	z-index: 3;
	
}

.list1 {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset: num1; /* Задаём имя счетчика */
}

.list {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset: num; /* Задаём имя счетчика */
}

.list li span, .list1 li span {
	background-color: gray;
	display: block;
}

.list1 li:before {
	content: counter(num1);
  counter-increment: num1;
	display: block;
	width: 20px;
	height: 20px;
	background-color: yellow;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: -34px;
	z-index: 1;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
}

.list li:before {
	content: counter(num);
  counter-increment: num;
	display: block;
	width: 20px;
	height: 20px;
	background-color: yellow;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: -34px;
	z-index: 1;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
}