<div class="content">
<ul class="services">
<li class="services__item">Design
<ul>
<li>Web</li>
<li>Mobile</li>
<li>Graphic</li>
</ul>
</li>
<li class="services__item">Web Development</li>
<li class="services__item">Mobile Development
<ul>
<li>iOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ul>
</li>
</ul>
</div>
.content {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
counter-reset: section;
}
ul {
list-style: none;
padding: 0;
}
.services {
counter-reset: services;
}
.services > li {
font-weight: bold;
}
.services__item:before {
counter-increment: services;
content: counter(services) ".";
margin-right: 0.5em;
display: inline-block;
vertical-align: middle;
}
.services__item {
margin-bottom: 1rem;
}
.services__item ul {
counter-reset: sub-services;
margin-left: 1.35em;
margin-top: 0.5em;
}
.services__item li {
font-weight: normal;
margin-bottom: 0.25rem;
}
.services__item li:before {
counter-increment: sub-services;
content: counter(services) "." counter(sub-services);
margin-right: 0.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.