CSS counters() function

Definition and usage

CSS's counters() The function returns the current value of the named counter and the nested counter in string form.

Here, we use counters() The function inserts a string between counters of different nesting levels.

Example

Example 1

Here, we use counters() The function inserts a string (a dot) between counters of different nesting levels:

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Try it yourself

Example 2

Set the counter style and set the connection string to "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

Try it yourself

CSS syntax

counters(countername, string, counterstyle)
Value Description
countername

Required. The name of the counter (the same as the name used in the counter-reset and counter-increment attributes).

Note: the names are case-sensitive.
string Required. The connection string. It can be any number of text characters.
counterstyle

Optional. The style of the counter (can be a value of list-style-type, a name of @counter-style, or the symbols() function).

The default value is decimal.

Technical details

Version: CSS3

Browser support

Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Related pages

Tutorial:CSS Counter

Reference:CSS content property

Reference:CSS counter-increment property

Reference:CSS counter-reset property

Reference:CSS @counter-style rule

Reference:CSS counter() function