Question 1

What are CSS counters?

Accepted Answer

CSS counters are variables maintained by CSS whose values can be incremented. They are used to automatically number elements like headings, sections, figures and list items without manual numbering in HTML.

Question 2

How do CSS counters work?

Accepted Answer

You create a counter with counter-reset, increment it with counter-increment, and display it with counter() or counters() in the content property of a pseudo-element.

Question 3

Can I create nested counters?

Accepted Answer

Yes! Use the counters() function (note the plural) with a separator string to create nested numbering like 1.1, 1.2, 2.1, etc.

Question 4

What numbering styles are available?

Accepted Answer

CSS supports many list-style-type values including decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, and more.