<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>

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

var isFirst = true,
  numLi = 1;

$("ol").each(function () {
  var list = $(this);
  list.attr("start", numLi);
  numLi = numLi + list.find("li").length;
});