Type in the numbers you want to convert:
Separate digits with a space, or use an ASCII hyphen to indicate a range.
Choose a style from a list:
Or paste the counter-style rule here:
Counters can be used for ordered lists, headings, figures, etc. This page allows you to see what is produced for a given number or sequence of numbers by the algorithms described by CSS3 Counter Styles and Ready-made Counter Styles. However, it is also likely to be useful if you want to create your own styles and test them, or create examples of styles for inclusion in other documents.
Start by adding a list of numbers to the top box. Numbers should be separated by a space. However, you can specify a range of numbers such as 8-12, and this will be expanded in the output. You can mix any number of numbers and ranges.
You can choose a style from the list, which includes all styles in the Ready-made Counter Styles document. The list will be updated so that it remains current with that document. Choosing from the list will insert the CSS code for that style in the next box down. You can then tweak those style rules, if you want (eg. to try out different affixes).
Alternatively, you can type a rule directly into that box.
The side bar options allow you to configure the output.
Show as markup is not intended for general use.
Updated 30 June, 2021