CSS Lists

by Alvin Olavarrieta

HTML

<main>
<h2>Simple</h2>

<ol class="simple-list">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et magna lacinia, tincidunt lectus sed, porta libero. Quisque facilisis laoreet quam eget ultricies. Integer odio arcu, egestas ut malesuada sed, facilisis eu lectus. Phasellus non molestie risus, ut luctus justo.</li>
<li>Sed vehicula turpis at mauris gravida, id vehicula enim posuere. Morbi ut adipiscing orci.</li>
<li>Sed egestas convallis sapien rhoncus blandit. Nullam eget lacus quam. Proin porta nisl quis luctus tempus. Etiam dapibus diam ut purus pulvinar consequat. Quisque arcu dui, tristique id venenatis vel, tristique sed purus. Vivamus feugiat mattis sollicitudin.</li>
</ol>

<h2>Tilted numbers</h2>

<ol class="tilted-list">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et magna lacinia, tincidunt lectus sed, porta libero. Quisque facilisis laoreet quam eget ultricies. Integer odio arcu, egestas ut malesuada sed, facilisis eu lectus. Phasellus non molestie risus, ut luctus justo.</li>
<li>Sed vehicula turpis at mauris gravida, id vehicula enim posuere. Morbi ut adipiscing orci.</li>
<li>Sed egestas convallis sapien rhoncus blandit. Nullam eget lacus quam. Proin porta nisl quis luctus tempus. Etiam dapibus diam ut purus pulvinar consequat. Quisque arcu dui, tristique id venenatis vel, tristique sed purus. Vivamus feugiat mattis sollicitudin.</li>
</ol>

<h2>Circles</h2>

<ol class="circles-list">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...

CSS

/* =============================================================================
   Simple
   ========================================================================== */
ol.simple-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
     
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.simple-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
     
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
 
    content: counter(li-counter);
    counter-increment: li-counter;
}


/* =============================================================================
    Tilted numbers
   ========================================================================== */
ol.tilted-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
     
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.tilted-list > li{
    position: relative;
    margin-bottom: 20px;
    padding: 1em;
    border-left: 2px solid #CCCCCC;
    background-color: #f5f5f5;
}
ol.tilted-list > li:before {
    position: absolute;
    top: 0;
    left: -0.95em;
    width: 1em;
 
    font-size: 4em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
     
    transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    z-index: -99;
    overflow: hidden;
     
    content: counter(li-counter);
    counter-increment: li-counter;
}


/* =============================================================================
   Circles
   ========================================================================== */
ol.circles-list {
    list-style-type: none;
   ...