<ul class="circle">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
<ul class="square">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
<ul class="diamond">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
<ul class="large">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
<ul class="oval">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
.circle{
counter-reset: list-counter;
list-style: none;
float:left;
}
.circle li{
margin: 1.5em 0;
}
.circle li:before{
content: counter(list-counter);
counter-increment: list-counter;
width: 1em;
height: 1em;
padding: .5em;
margin-right: 1em;
border-radius: 50%;
border: .25em solid #ccc;
background: #000;
color: #fff;
font-family: arial;
font-weight: bold;
text-align: center;
display: inline-block;
}
.square{
counter-reset: list-counter;
list-style: none;
float:left;
}
.square li{
margin: 1.5em 0;
}
.square li:before{
content: counter(list-counter);
counter-increment: list-counter;
width: 1em;
height: 1em;
padding: .5em;
margin-right: 1em;
border: .25em solid #ccc;
background: #000;
color: #fff;
font-family: arial;
font-weight: bold;
text-align: center;
display: inline-block;
}
.diamond{
counter-reset: list-counter;
list-style: none;
float:left;
}
.diamond li{
margin: 1.5em 0;
}
.diamond li:before{
content: counter(list-counter);
counter-increment: list-counter;
transform: rotate(45deg);
text-transform: rotate(90deg);
width: 1em;
height: 1em;
padding: .5em;
margin-right: 1em;
border: .25em solid #ccc;
background: #000;
color: #fff;
font-family: arial;
font-weight: bold;
text-align: center;
display: inline-block;
}
.large{
counter-reset: list-counter;
list-style: none;
float:left;
}
.large li{
margin: 1.5em 0;
line-height: 1em
}
.large li:before{
content: counter(list-counter);
counter-increment: list-counter;
font-family: arial;
color:#666;
font: bold;
font-size: 2em;
margin-right: .5em;
}
.oval{
counter-reset: list-counter;
list-style: none;
float:left;
}
.oval li{
margin: 1.5em 0;
}
.oval li:before{
content: counter(list-counter);
counter-increment: list-counter;
width: .5em;
height: 1em;
padding: .5em;
margin-right: 1em;
border-radius: 50%;
border: .25em solid #ccc;
background: #000;
color: #fff;
font-family: arial;
font-weight: bold;
text-align: center;
display: inline-block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.