Menu
Advanced Features
CSS Counters
Automatic numbering with CSS variables.
1Auto Numbering
Increment values automatically.
Example Code
css
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}2Understand it in a real interface
CSS counters can number generated labels across a structured set of elements. They are useful for a decorative section numbering system, but the meaningful sequence should still be clear in HTML. Counter resets and increments depend on where the rules apply in the document tree.
3Try it yourself
Build three sections and give them a shared counter. Insert a nested section and observe whether the numbering matches your intention. Keep instructions in an ordered list when sequence is essential, rather than depending only on generated counter text.
Finished reading?
Mark this topic as complete to track progress.