Counter Values

Counter values are specified using one of the functions shown below. These functions allow a counter name to be specified and optionally a counter style to be specified as well. The specified name value is case-sensitive and must not be set to 'none', 'inherit', or 'initial'.

• counter( ) - This function identifies a single counter and can occur in one of the following two forms.
  • counter(name) - The name value sets a counter name. Since the style value is not specified, decimal is used by default.
    • Content property example - h1:before {content: counter(month);}
  • counter(name, style) - The name value is set to the name of the counter. The style value is set to one of the following keywords: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none.
    • Content property example - h1:before {content: counter(month, upper-roman);}
• counters( ) - This function identifies nested counters with the same name. For this function, name and string are required but style is optional.
  • counters(name, string) - The name value sets a counter name. The string value is used to separate the count values. Since the style value is not specified, decimal is used by default.
    • Content property example - h1:before {content: counter(month, ".");}
  • counters(name, string, style) - The name value is set to the name of the counter. The string value is used to separate the count values. The style value is set to one of the following keywords: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none.
    • Content property example - h1:before {content: counter(month, ".", upper-roman);}