CSS Counter Generator
Build the counter-reset / counter-increment / content CSS for an automatically numbered list, in decimal, Roman numerals or letters.
Advertisement
About this tool
CSS counters number elements automatically without needing an <ol> — handy for custom step lists, numbered cards, or any container where you want the browser to keep the numbering in sync as items are added or removed.
Tick “nested lists” for legal-style numbering such as 1, 1.1, 1.2, 2, where each sub-list carries on from its parent; this uses the counters() function, which joins the numbers at every level with a full stop. Screen readers don’t always announce numbers created with CSS, so if the numbering matters (for instructions people must follow in order), use a real <ol> list as well.