The value of a CSS counter, generally a number produced by computations defined by and
properties. It can be displayed using either the counter() or
counters() function.
The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the
innermost counter of the given name in scope at the given
pseudo-element. It is formatted in the specified
(decimal by default).
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)'
or 'counter(name, style)'. The generated text is the value of the
innermost counter of the given name in scope at this pseudo-element;
it is formatted in the indicated style ('decimal' by default). The
latter function also has two forms: 'counters(name, string)' or
'counters(name, string, style)'. The generated text is the value of
all counters with the given name in scope at this pseudo-element, from
outermost to innermost separated by the specified string. The counters
are rendered in the indicated style ('decimal' by default). See the
section on automatic counters and numbering
The at-rule counter-style allows you to create your own list styles. But the validator does not support it.
Error message :
// CSS
// HTML
For information : the MDN page of Content property :
And in w3c page of content property :