
CSS Counters have been in the spec since 2.1 and work well with the psuedo elements :before and :after. They’re pretty neat especially when mixed with nested elements where they can return even more granular results but I’ve never seen them used in the wild.
CSS Counters seem designed for list items but what if you wanted to create documentation, Ts & Cs or minutes for a meeting that had section & sub-section numbers but weren’t laid out as a list? Turns out there are a few tricks to getting this to work properly.
Other examples I’ve seen explore using counters on ordered or unordered list and give you options for declaring the value of nested list items, but I wanted a solution that would allow numeration of a more ‘free-form’ document. So that’s what I’ve tried to do here, let me know how you think I did. . .
Continue reading →