<ol class="steps">
  <li><strong>Item 1</strong><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non gravida ante. Curabitur nec fermentum nisi, non interdum tortor. Pellentesque ac sapien sem.
  </li>
  <li><strong>Item 2</strong><br />
    In blandit, justo tincidunt condimentum rhoncus, lectus sem scelerisque justo, quis tincidunt risus nunc vitae turpis. Suspendisse et aliquet nibh.
  </li>  
  <li><strong>Item 3</strong><br />
    Nullam a mollis mauris. Nam dictum nibh sed pharetra rhoncus. Sed posuere sed lacus quis congue. Integer sodales porttitor quam, at auctor sem tincidunt quis.
  </li>
  <li><strong>Item 4</strong><br />
    Phasellus rutrum, elit vitae rutrum sodales, sem mauris luctus libero, non convallis leo dui sed quam. Duis blandit magna sit amet ornare dapibus.
  </li>
</ol>

@import "compass/css3";

.steps {
    counter-reset: my-really-cool-counter;
    margin: 4em 0;
    li {
    font: normal 1em/1.5em Helvetica, Sans-Serif;
        position: relative;
        padding: 0 0 1.5em 3em; // Left padding to make room for the red dot.
        list-style: none; // Do not display the default order numbering of list items.
      
    // Define and display the custom order numbering of list items.
    // ------------------------------------------------------------
        &:before {
            content: counter(my-really-cool-counter);
            counter-increment: my-really-cool-counter;
            color: #fff;
            display: block;
            left: 0;
      line-height: 2em; // Center the number vertically in the red dot.
            position: absolute;
            text-align: center; // Center the number horizontally in the red dot.
            text-shadow: 0 2px 0 darken(#f00,10%);
            top: 0;
            width: 2em;
            z-index: 2; // Put the number on top of the red dot.
        }
      
    // Create the red dot.
    // -------------------
        &:after {
            @include border-radius(50%); // Make the dot circular
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            height: 0;
            width: 0;
            background: #f00;
            border: 1em solid #f00;
            z-index: 1;
        }
      
    // Create the columns of the list
    // ------------------------------
      
    // One column for 1 and +4 list items 
        &:first-child {
          &:nth-last-child(1) {
              width: 90%; // fallback for old IE
              width: calc(100% - 3em); // Subtract the padding from the width.
          }
          
    // Two columns for 2 list items
          &:nth-last-child(2),
          &:nth-last-child(2) ~ li {
              min-width: 8em;
              width: 45%; // fallback for old IE
              width: calc(50% - 4em);
              float: left;
              padding-right: 1em;
          }
          
    // Three columns for 3 list items
          &:nth-last-child(3),
          &:nth-last-child(3) ~ li {
              min-width: 8em;
              width: 27.5%; // fallback for old IE
              width: calc(33.333% - 4em);
              float: left;
              padding-right: 1em;
          }
          
    // Four columns for 4 list items
          &:nth-last-child(4),
          &:nth-last-child(4) ~ li {
              min-width: 6em;
              width: 20%; // fallback for old IE
              width: calc(25% - 4em);
              float: left;
              padding-right: 1em;
          }
       }
    }
}