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?
In the CSS we are going to do three key things: Initialize the counter on the parent div using counter-reset. Increment the counter value by 1 on the child div p using counter-increment. Add the counter variables before the div p content using the :before pseudo selector.
The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.
The property is used to insert generated content in a web page and it is fully supported in all major browsers.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With