A “counter style” is the definition and/or implementation of the sequence of numbers, letters, and/or symbols to use to represent a numbering sequence. CSS 1 defined a handful of counter styles based on what HTML traditionally allowed on lists. CSS Counter Styles Level 3 defines the @counter-style; rule, which provides a mechanism for defining custom counter styles, plus it defines a number of counter styles that should all (eventually) be expected to be built into browsers.

The core of a CSS 3 counter style is that it attaches a name to an algorithm for generating string representations of integer counter values. A counter style may also include properties indicating a prefix and/or suffix to add to the generated values, additional strings to indicate negative numbers, etc. The counter style can be used in the list-style-type and in the counter() and counters() functions.

The following example shows a ‘my-filled-circled-decimal’ counter style that is a based on the ‘filled-circled-decimal’ counter style from CSS Counter Styles Level 3. As the name suggests, the counter style uses decimal numbers inside filled circles to represent decimal numbers. The numbers are followed by a space. The counter style is used when numbering the items in an <ol>.

@counter-style my-filled-circled-decimal {
system: fixed;
symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e';
/* symbols: '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾'; */
suffix: ' ';
} 
ol.my-filled-circled-decimal li { list-style-type: my-filled-circled-decimal;  }
…
<ol role="my-filled-circled-decimal">
  <li title="1">1</li>
  <li title="2">2</li>
</ol>