Question

I’m using the following css to display a step counter:

:before {
  content: "step " counter(fieldsets);
  counter-increment: fieldsets;
  /* Some more css */
}

But I was wondered if it was possible to display the total number of elements as well, like so:

:before {
  content: "step " counter(fieldsets) " of " total_number_of_fieldsets;
  counter-increment: fieldsets
  /* Some more css */
}

I would love it to be a pure css solution, is that possible?

Answer 1

Unless you have something else that calculate the total_number_of_fieldsets count in the CSS, it is not possible.

See this fiddle: http://jsfiddle.net/EawLA/

You can show the total :after

Note that this will not work in IE<9 as pseudo elements are not supported