CodePen

HTML

            
              <section>
  <ol>
    <li>Go to store</li>
    <li>Go to meat counter</li>
    <li>Ask butcher for skirt steak</li>
  </ol>
</section>

<section>
  <ol>
    <li>Drive home</li>
    <li>Park safely</li>
    <li>Start grill</li>
  </ol>
</section>

<section>
  <ol>
    <li>Marinate steak</li>
    <li>Put on grill</li>
    <li>Wait 8 minutes and flip</li>
  </ol>
</section>

<section>
  <ol>
    <li>Bring steak inside</li>
    <li>Wait 10 minutes</li>
    <li>Eat</li>
  </ol>
</section>

            
          
!

CSS

            
              body {
  background: #f06d06;
  counter-reset: mega-step, mini-step;
}

section {
  width: 20%;
  float: left;
  margin: 20px;
  background: white;
  counter-increment: mega-step;
  padding: 5px;
}
section:before {
  content: counter(mega-step, upper-roman);
  display: block;
  padding: 10px;
  background: #f06d06;
  width: 10%;
  text-align: center;
  color: white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var isFirst = true, numLi = 1;

$("ol").each(function() {  
  var list = $(this);
  list.attr("start", numLi);
  numLi = numLi + list.find("li").length;
}); 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................