<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<br>
<hr>
<br>
<ol class="ol-type-2">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
ol {
list-style: none;
counter-reset: i;
}
ol li {
counter-increment: i;
font-size: 30px;
padding: 5px 10px;
}
ol li:nth-child(even) {
background-color: #ccc;
}
ol li:before {
content: counter(i) ".";
display: inline-block;
background-color: #fff;
color: red;
width: 40px;
height: 40px;
font-weight: bold;
border: 2px solid red;
border-radius: 50%;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
.ol-type-2 li:before {
content: counter(i, upper-roman);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.