Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11counter-increment changes a CSS counter by a chosen integer on each element that matches the rule. Use it with counter-reset to establish a starting point and counter() or counters() to display the value—often in generated content. Omit the integer to add 1, or use a negative integer to count down.
What does counter-increment do?
The CSS counter-increment property increases or decreases one or more named counters when an element is processed. It does not display a number by itself: use the CSS content property with counter() or counters() to render the value. See the MDN property reference and MDN guide to CSS counters.
The property applies to all elements, is not inherited, and has an initial value of none. Its value is one or more counter names, each optionally followed by an integer, or none.
counter-increment: none;
counter-increment: chapter;
counter-increment: chapter 2;
counter-increment: chapter -1;
counter-increment: chapter 1 figure 1;counter-increment: chapter;advanceschapterby 1.counter-increment: chapter 2;advances it by 2.counter-increment: chapter -1;decreases it by 1.- A counter that has not been created yet is created when the increment declaration applies. Without an earlier reset, its starting value is 0.
How to number headings with CSS counters
Reset the counter on a containing element, increment it on each heading, then insert its current value before the heading text. This example numbers the h2 elements inside each chapter section:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<section class="chapter">
<h2>Introduction</h2>
<h2>Implementation</h2>
</section>.chapter {
counter-reset: heading;
}
.chapter h2 {
counter-increment: heading;
}
.chapter h2::before {
content: "Section " counter(heading) ". ";
}counter-reset establishes the counter and its scope; each matching heading advances it; counter(heading) inserts the current value as generated content. With no explicit reset value, the counter starts at 0, so the first incremented heading displays 1.
How to count backward or change by more than one
Give counter-reset a starting value and use a negative step to count down. This list starts at 100 and decreases by 7 for every matching item:
.timeline {
counter-reset: step 100;
}
.timeline > li {
counter-increment: step -7;
}
.timeline > li::before {
content: counter(step);
}The first item is incremented before its value is displayed, so this rule makes it show 93. If the first item should show the reset value, target it separately and set counter-increment: none for that item, as in the backward-counting pattern in the MDN reference.
How to update multiple counters—or only stop one
A single declaration can change multiple named counters by giving each its own optional integer. For example, counter-increment: chapter 1 figure 1; advances both counters by 1 on the matched element.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
none disables all counter changes for that declaration. To leave one counter unchanged while updating another, set that counter’s step to 0: counter-increment: section 1 figure 0; advances section but does not change figure.
Why is a CSS counter not increasing?
Check the counter’s scope, the matched element, and whether the value is being rendered. CSS counter operations depend on the document tree and apply only to elements that generate boxes.
- Check the reset scope. Confirm that
counter-resetis on a containing element whose counter context includes the elements you intend to number. - Check the increment selector. Make sure the intended elements actually match the rule containing
counter-increment. - Check the element’s display. An element with
display: nonegenerates no box, so it does not increment or reset a counter. Hidden conditional markup can therefore affect what you expect to see. The counter behavior is covered in the MDN counters guide and CSS 2.1. - Check the output rule. The increment changes a value, not visible text. Confirm that a pseudo-element or other generated-content rule exposes it with syntax such as
content: counter(name);orcontent: counters(name, ".");.
CSS counters versus ordered lists and JavaScript numbering
CSS counters are useful when numbering is a visual presentation effect. They are not a replacement for semantic HTML or a source of number data for scripts: a generated number does not become ordinary document text just because it appears on screen.
| Approach | Best suited to | Important trade-off |
|---|---|---|
HTML ordered list (<ol>) |
Content that is inherently a numbered list | Provides list structure in HTML rather than relying on a visual CSS number. |
| CSS counters | Visual numbering such as headings, figures, or nested sections | Numbering is presentation data; it does not by itself provide an accessible data model or a value for scripts. |
| JavaScript numbering | Cases where numbers must be calculated or used by application logic | Requires code to maintain the values as the relevant content changes. |
For nested counter values, counters() can combine the values of counters with the same name at different nesting levels, using a separator such as a period. The MDN counters guide explains both counter() and counters().
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
Browser support
MDN marks counter-increment as Baseline Widely available and reports support across browsers since July 2015. The reference points to CSS Lists and Counters Module Level 3; foundational behavior, including the rule for display: none, is also defined in CSS 2.1.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
