<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;
			    }
		   }
	  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js