---
title: CSS Counter Styles
slug: Web/CSS/CSS_Counter_Styles
tags:
  - CSS
  - CSS Counter Styles
  - Guide
  - NeedsContent
  - Overview
  - Reference
spec-urls: https://drafts.csswg.org/css-counter-styles/
---
{{CSSRef}}

**CSS Counter Styles** is a module of CSS that lets you define your own counter styles.

## Reference

### Properties

- {{cssxref("counter-increment")}}
- {{cssxref("counter-reset")}}

### Functions

- {{cssxref("symbols", "symbols()")}}

### At-rules

- {{cssxref("@counter-style")}}

  - {{cssxref("@counter-style/system","system")}}
  - {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
  - {{cssxref("@counter-style/negative", "negative")}}
  - {{cssxref("@counter-style/prefix", "prefix")}}
  - {{cssxref("@counter-style/suffix", "suffix")}}
  - {{cssxref("@counter-style/range", "range")}}
  - {{cssxref("@counter-style/pad", "pad")}}
  - {{cssxref("@counter-style/speak-as", "speak-as")}}
  - {{cssxref("@counter-style/fallback", "fallback")}}

## Guides

- [Using CSS counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
  - : Describes how to use counters to number any HTML element or to perform complex counting.

## Specifications

{{Specifications}}

## Browser compatibility

### `@counter-style` rule

{{Compat("css.at-rules.counter-style")}}

### `counter-increment` property

{{Compat("css.properties.counter-increment")}}

### `counter-reset` property

{{Compat("css.properties.counter-reset")}}
