## CSS counter() Function
The `counter()` function in CSS is a powerful tool used to retrieve and display the current value of a CSS counter as a string.
By combining `counter()` with the `counter-reset` and `counter-increment` properties, you can dynamically generate automatic numbering for headings, lists, figures, and other elements on your web page. It is typically used within the `content` property of pseudo-elements like `::before` and `::after`.
---
## Syntax
```css
counter(countername, counterstyle)
```
### Parameter Values
| Parameter | Requirement | Description |
| :--- | :--- | :--- |
| `countername` | **Required** | The name of the counter. This must match the name defined in your `counter-reset` and `counter-increment` properties. |
| `counterstyle` | *Optional* | The rendering style of the counter. It accepts any valid CSS `list-style-type` value (e.g., `decimal`, `lower-roman`, `upper-roman`, `lower-alpha`, `square`, etc.). The default is `decimal`. |
---
## Browser Support
The `counter()` function has excellent cross-browser compatibility and is fully supported by all modern web browsers:
| Function | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `counter()` | Supported | Supported | Supported | Supported | Supported |
---
## Code Examples
### Example 1: Basic Section Numbering
In this example, we initialize a counter named `section` on the `body` element, increment it for each `
` element, and display the counter value before each heading.
```css
body {
/* Initialize the counter named "section" to 0 */
counter-reset: section;
}
h3::before {
/* Increment the "section" counter by 1 */
counter-increment: section;
/* Display the counter value prefixed with "Section " */
content: "Section " counter(section) ": ";
}
```
### Example 2: Customizing Counter Styles
You can change the appearance of the counter (e.g., using Roman numerals) by passing a second argument to the `counter()` function.
```css
body {
/* Initialize the counter named "section" to 0 */
counter-reset: section;
}
h2::before {
/* Increment the "section" counter by 1 */
counter-increment: section;
/* Display the counter value using uppercase Roman numerals */
content: "Section " counter(section, upper-roman) ": ";
}
```
### Example 3: Nested Counters with `counters()`
For nested lists (like sub-items in an ordered list), use the companion function `counters()`. This automatically concatenates nested counter instances with a specified separator string.
```css
ol {
/* Create a new instance of the "section" counter for each element */
counter-reset: section;
list-style-type: none;
}
li::before {
/* Increment only the current instance of the "section" counter */
counter-increment: section;
/* Display all nested counter instances separated by a dot "." */
content: counters(section, ".") " ";
}
```
---
## Considerations & Best Practices
1. **Accessibility (A11y):** Content generated via CSS pseudo-elements (`::before`/`::after`) using the `content` property is not always read reliably by screen readers. Avoid using counters for critical structural information that is essential to understanding the document's hierarchy.
2. **Scope:** Counters are scoped to the element where they are initialized using `counter-reset`. If you reset a counter inside a nested element, a new nested counter instance is created.
3. **Pseudo-elements:** The `counter()` function is only effective when used inside the `content` property, which is primarily supported on `::before` and `::after` pseudo-elements.
YouTip