<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;
    
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.