JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<ul>
						<li>Один</li>
						<li>Два</li>
						<li>Три</li>
						<li>Четыре</li>
						<li>Пять</li>
					</ul>
					<ul class="numeric">
					    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates temporibus deleniti excepturi vitae doloremque ipsam beatae alias aliquam ad error pariatur sapiente fugit optio iure fugiat id expedita saepe non.
					        <ul>
					            <li>Подпункт
							        <ul>
							            <li>Подпункт</li>
							            <li>Подпункт
									        <ul>
									            <li>Подпункт</li>
									            <li>Подпункт</li>
									        </ul>
							            </li>
							        </ul>
					            </li>
					            <li>Подпункт</li>
					        </ul>
					    </li>
					    <li>Пункт
					    </li>
					    <li>Пункт
					        <ul>
					            <li>Подпункт</li>
					            <li>Подпункт</li>
					        </ul>
					    </li>
					    <li>Пункт
					        <ul>
					            <li>Подпункт</li>
					            <li>Подпункт</li>
					        </ul>
					    </li>
					    <li>Пункт
					        <ul>
					            <li>Подпункт</li>
					            <li>Подпункт</li>
					        </ul>
					    </li>
					    <li>Пункт
					        <ul>
					            <li>Подпункт</li>
					            <li>Подпункт</li>
					        </ul>
					    </li>
					</ul>

CSS

.numeric, .numeric ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.numeric li{
	position: relative;
	line-height: 1.5em;
	margin-bottom: 5px;
	padding-left: 30px;
	list-style: none;
}

.numeric ul > li{
	padding-left: 30px;
}

.numeric ul > li ul > li{
	padding-left: 41px;
}

.numeric ul > li ul > li ul > li{
	padding-left: 53px;
}

.numeric li:before{
	position: absolute;
	left: 0;
	display: inline-block;
	margin-right: 5px;
}

.numeric {
    counter-reset: one;
}

.numeric > li:before {
    content: ' ' counter(one); 
    counter-increment: one;
    background: #535d65;
    color: #fff;
    padding: 0 7px;
    border-radius: 51%;  
}

.numeric ul {
	margin-left: 20px;
    counter-reset: two;   
}

.numeric ul li:before {
    content: ' ' counter(one) '.' counter(two) '.';
    counter-increment: two;
    font-weight: bold;
    font-style: italic;
    color: #727a83;   
}

.numeric ul ul{
    counter-reset: three;   
}

.numeric ul ul li:before {
    content: ' ' counter(one) '.' counter(two) '.' counter(three) '.';
    counter-increment: three;   
}

.numeric ul ul ul{
    counter-reset: four;   
}

.numeric ul ul ul li:before {
    content: ' ' counter(one) '.' counter(two) '.' counter(three) '.' counter(four) '.';
    counter-increment: four;   
}