counters() CSS function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The
counters() function has two forms:
counters(name, string) or
counters(name, string, style). It is generally used with pseudo-elements, but can be used, theoretically, anywhere a
<string> value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to
decimal if no style is specified.
/* Simple usage - style defaults to decimal */ counters(countername, '-'); /* changing the counter display */ counters(countername, '.', upper-roman)
A counter has no visible effect by itself. The
counters() function (and
counter() function) is what makes it useful by returning developer defined content.
counters() function can be used with any CSS property, but support for properties other than
content is experimental, and support for the type-or-unit parameter is sparse.
Check the Browser compatibility table carefully before using this in production.