<div class="wrapper">
<h1>Resetting list counters</h1>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
</ol>
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
html, body {
height:100%;
}
body {
margin:50px;
font-size:100%;
line-height:1.5;
font-family: Roboto;
background:@main-bg-colour;
background: radial-gradient(circle, lighten(@main-bg-colour,1%), darken(@main-bg-colour,20%));
}
@main-bg-colour:rgb(25,159,158);
@other-colour: desaturate(spin(@main-bg-colour, 10), 15%);
@main-font-colour:#fff;
*, *:before, *:after {
box-sizing:border-box;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper {
width:600px;
margin:50px auto;
background:#fff;
padding:2em;
}
ol {
counter-reset: my-counter;
list-style-type: none;
}
ol ol {
margin-left:0.9em;
}
ol li {
counter-increment: my-counter;
line-height:1.5;
&:before {
content: counters(my-counter,".") ".";
font-weight:700;
text-transform:uppercase;
padding-right:3px;
}
}
h1 {
font-family:"Fjalla One", sans-serif;
font-size:2em;
text-transform:uppercase;
font-weight:400;
color:@main-bg-colour;
border-bottom:1px solid @main-bg-colour;
margin-bottom:1em;
}
View Compiled
This Pen doesn't use any external JavaScript resources.