HTML:
<ol class="list-number-styled"> <li>list item 1</li> <li>list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2 list item 2</li> <li>list item 3</li> </ol>
CSS:
.list-number-styled {
counter-reset: list-number-styled;
padding: 0 0 0 50px;
margin: 0;
}
.list-number-styled > li {
list-style-type: none;
position: relative;
counter-increment: list-number-styled;
margin-bottom: 30px;
}
.list-number-styled > li:before {
content: counter(list-number-styled, decimal);
display: block;
text-align: right;
color: red;
position: absolute;
width: 40px;
height: 20px;
font-size: 18px;
line-height: 18px;
font-weight: bold;
top: 3px;
left: -60px;
pointer-events: none;
}
Others options for counter: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha