counter-set

Sets a CSS counter to a specified value. Unlike 'counter-reset', which starts a new scope, 'counter-set' modifies the value of an existing counter within the current scope.

Quick example

.special-item {
  /* Hard-sets the 'item-num' counter to 99 */
  counter-set: item-num 99;
}

Quick facts

Initial value
none
Inherited
No
Applies to
all elements
Animation type
byComputedValueType

Values

none

counter-set Browser Support

Widely availableSince 202393% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

85+
68+
17.2+
85+
ESC