CSS counters() Function
Example
Here we use the counters() function to insert a string (a dot) between different levels of nested counters:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content:
counters(section,".") " ";
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS counters() function returns the current values of the named
and nested counters, as a string.
Here we use the counters() function to insert a string between different levels of nested counters
| Version: | CSS3 |
|---|
Browser Support
| Function | |||||
|---|---|---|---|---|---|
| counters() | Yes | Yes | Yes | Yes | Yes |
CSS Syntax
counters(countername, string,
counterstyle)
| Value | Description |
|---|---|
| countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties). Note that the name is case sensitive |
| string | Required. The concatenator string. Any number of text characters |
| counterstyle | Optional. The style of the counter (can be a list-style-type value, a @counter-style name or symbols() function). Default value is decimal |
More Examples
Example
Set the style of the counter and also set the concatenator string to "-":
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content:
counters(section, "-", lower-alpha) " ";
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Counters.
CSS reference: content property.
CSS reference: counter-increment property.
CSS reference: counter-reset property.
CSS reference: @counter-style rule.
CSS reference: counter() function.
