Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
counter-resetInitialize counter
counter-incrementIncrease counter
counter()Display counter
counter-resetCreate and initialize counter to 0
counter-reset: section;counter-incrementIncrease counter value
counter-increment: section;counter()Show counter value
content: counter(section);/* Initialize counter */
body {
counter-reset: section;
}
/* Increment counter */
h2 {
counter-increment: section;
}
/* Display counter */
h2::before {
content: "Section " counter(section) ": ";
color: blue;
}
/* Result:
Section 1: Introduction
Section 2: Getting Started
Section 3: Advanced Topics
*/<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🔢 CSS Counters Demo</h1>
<h2>Introduction</h2>
<h3>What are counters?</h3>
<p>CSS counters provide automatic numbering.</p>
<h3>How they work</h3>
<p>They use counter-reset, counter-increment, and counter().</p>
<h2>Getting Started</h2>
<h3>Basic setup</h3>
<p>Initialize counters in the parent element.</p>
<h3>Incrementing</h3>
<p>Use counter-increment on elements to count.</p>
<h2>Advanced Usage</h2>
<h3>Nested counters</h3>
<p>Counters can be nested for multi-level numbering.</p>
<h3>Custom formatting</h3>
<p>Use different number styles like roman numerals.</p>
</div>
</body>
</html>Loading preview...
Use the second parameter of counter() for custom styles:
decimal1, 2, 3
counter(section, decimal)upper-romanI, II, III
counter(section, upper-roman)lower-alphaa, b, c
counter(section, lower-alpha)upper-alphaA, B, C
counter(section, upper-alpha)lower-romani, ii, iii
counter(section, lower-roman)Documentation
Number sections and headings
Table of Contents
Automatic numbering
Code Examples
Number code blocks
Footnotes
Reference numbering
Nested Lists
Multi-level numbering
content: counter(name)