CSS counter styles

The CSS counter styles module lets you define your own counter styles to manage the appearance of markers in lists and counters in generated content. It also enables you to extend native browser list styles with your own customizations.

While we think of counters as numbers, they are actually strings with components that can be incremented. The counter styles module defines the @counter-style rule with ten descriptors, which enable developers to precisely define how counters are converted into strings. This module enables defining which characters to use for the counter bullets, the prefix to put before the counter and postfix that comes after, along with how to handle negative values. The descriptors can also set a range to limit the values a counter style can handle, while also providing fallback styles for when the counter value falls outside the defined range or otherwise can't render the counter value. The module also enables defining how the counter is read out loud by speech synthesizers.

Reference

Properties

No properties are defined in this module

Functions

Data types

At-rules and descriptors

Interfaces and APIs

Guides

Using CSS counters

Describes how to use counters to number any HTML element or to perform complex counting.

CSS lists and counters module:

CSS pseudo-elements module:

CSS generated content

Specifications

Specification
CSS Counter Styles Level 3

See also