Build a CSS @counter-style at-rule for custom ordered-list markers. Choose a counter system (cyclic, numeric, alphabetic, symbolic, additive, fixed, or extends), supply symbols, prefix, suffix, range, pad, negative, and fallback — then preview against a live <ol>.
list-style-type: my-counter;.cyclic / symbolic / fixed: a list of strings. For numeric / alphabetic: digits in increasing value (need ≥2; alphabetic must not include the "0" digit).". ". Set empty to omit a suffix.start attribute on the preview <ol> (also useful for testing range & negative).@counter-style and fall back to the fallback descriptor (default: decimal).
cyclic repeats the symbols forever (good for emoji bullets). numeric uses positional notation like decimal (first symbol = "zero"). alphabetic uses bijective base-N like spreadsheet columns (A, B…Z, AA, AB…). symbolic repeats the symbol N times (i, ii, iii). additive picks symbols whose weights sum to the value (used for roman numerals). fixed applies the symbols N times then falls back. extends inherits from an existing style and lets you override single descriptors (e.g. add a custom suffix to decimal). Apply the style with list-style-type: name; or ::marker { content: counter(c, name); }.