counter-increment

Last updated on

Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>
body {
  counter-reset: my-awesome-counter;
}
section {
  counter-increment: my-awesome-counter;
}
section:before {
  content: counter(my-awesome-counter);
}

Each <section> will respectively start with “1”, “2”, “3”, or “4”.

You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:

section:before {
  content: counter(my-awesome-counter, upper-roman);
}

Demo

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

Browser Support

Chrome Safari Firefox Opera IE Android iOS
2+ 3.1+ Any 9.2+ 8+ TBD TBD

Leave a Reply

Your email address will not be published. Required fields are marked *