Counter-Increment in CSS

CSS counter not incrementing

The problem is the repeated definition of the counter-increment property:

body {
  counter-reset: firstCounter;
  counter-reset: secondCounter;
}

The second definition overrides the first; to increment multiple counters you simply have to use a white-space separated list of those counters:

body {
  counter-reset: firstCounter secondCounter;
}

Name: counter-increment

Value: [ ? ]+ | none

<custom-ident> <integer>?

The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

body {  counter-reset: firstCounter secondCounter;}
h2.heading::before {  counter-increment: firstCounter;  content: counter(firstCounter)"\00a0";}
h3.issue::before {  counter-increment: secondCounter;  content: counter(secondCounter)"\00a0";}
/* irrelevant, just for the sake of easier visuals in the answer: */
h2 {  border-top: 2px solid #aaa;}
h3 {  margin-left: 2em;}

<h1>The Book</h1>
<h2 class="heading">First Heading</h2><h3 class="issue">The Issue of Drinking</h3><h3 class="issue">The Issue of Drinking Too Much</h3>
<h2 class="heading">Second Heading</h2><h3 class="issue">The Issue of Driving</h3><h3 class="issue">The Issue of Drunk Driving</h3>

How can I increment the counter in my css code?

You should be using counter-reset property on the wrapper of the lists - see demo below:

body { counter-reset:counter;}.list {  display: table;}.list:before {  display: table-cell;  counter-increment: counter;  content: counter(counter) '.';  padding-right: 5px;}

<p class="list">first.</p><p class="list">second.</p>

CSS Counter Increment is not working

You should have this css on the ul itself:

.moving-steps {
    counter-reset: headings;
}

and counter-increment should only contain headings:

.moving-steps > li:before {
    counter-increment: headings;
}

Check out this JS Fiddle:

.moving-steps {  counter-reset: headings;  list-style: none;}.moving-steps > li:before {  background: none repeat scroll 0 0 #8F8888;  border-radius: 15px;  color: #FFFFFF;  counter-increment: headings;  content: counter(headings, decimal);  display: block;  float: left;  font-size: 16px;  font-weight: bold;  height: 25px;  line-height: 26px;  margin-bottom: 0;  margin-right: 5px;  text-indent: 8px;  width: 25px;}

<ul class="moving-steps">  <li>First item</li>  <li>Second item</li>  <li>Third item</li></ul>

How to make first li value 0 and then increment by 2 using css counter?

When you reset a counter without stating the value (2nd param), the default is 0. However, counter increments are applied immediately, so if a counter's initial value is 0, an element (li::before in your code) which both displays an increments the counter would have a value of 2 and not 0. If you need an element to have a counter of 0, set the initial counter value to - the set value (-2 in your case).

In your code - reset the counter to -2, and the 1st increment will raise it to 0:

.progressbar {
  counter-reset: step -2;
}

Example (HTML and not React):

.progressbar {  counter-reset: step -2;}
.progressbar li {  list-style-type: none;  width: 15%;  float: left;  font-size: 12px;  position: relative;  text-align: center;  text-transform: uppercase;  color: #7d7d7d;}
.progressbar li::before {  width: 30px;  height: 30px;  content: counter(step);  counter-increment: step 2;  line-height: 30px;  border: 2px solid #7d7d7d;  display: block;  text-align: center;  margin: 0 auto 10px auto;  border-radius: 50%;  background-color: white;}
.progressbar li::after {  width: 100%;  height: 2px;  content: '';  position: absolute;  background-color: #7d7d7d;  top: 15px;  left: -50%;  z-index: -1;}
.progressbar li:first-child::after {  content: none;}
.progressbar li.active::before {  width: 40px;  height: 40px;  line-height: 40px;  text-align: center;  margin-top: -4px;  background-color: #FF5A66;  border-color: #FF5A66;  color: white;}

<div>  <ul class="progressbar">    <li id="0"></li>    <li id="2"></li>    <li id="4"></li>    <li id="6"></li>    <li id="8"></li>    <li id="10"></li>  </ul></div>

Cannot find a way to make counter-increment work (Chrome/Firefox)

I don't think you can achieve what you're trying to. The reason you get "Page 1" is because you're incrementing the counter inside the div.footer:after declaration, which appears only once in your HTML code.

The CSS counter, when it's read, is calculated based on that element's location in the document, like described in the specs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

So in your case, you can think about it like this:

div.footer:after {
  content: "Page " counter(page); /* when displayed, read the value of `page` */
}
p {
  counter-increment: page; /* counter increments with every occurrence of a <p> tag */
}

and

<div class="footer"></div> <!-- `page` counter is always 0, as no occurrences of a <p> tag yet -->
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->

<p>Hello world page 1</p> <!-- sets counter to 1 -->
<div class="footer"></div> <!-- `page` counter is always 1, as there was a single occurrence of a <p> tag -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->

<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
<div class="footer"></div> <!-- `page` counter is always 2, as there were two occurrences of a <p> tag -->

How to use CSS counter increment for dynamic page numbers

So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.

I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.

This solved my issue, https://stackoverflow.com/a/13496899/6000966.

I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.

I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.

Static pages on the other hand should work with the above answers.

How to use css Counter Increment

Try giving the specific paragraph a class or id like shown below:

<p class="counterParagraph">This is a paragraph</p>

and editing your css

p.counterParagraph::before{
    content: counter(my-counter) "." counter(subsection) "." ;
    counter-increment: subsection;
    color: red;
    margin-right: 5px;
}

Why does counter-increment work this way?

ol counter doesn't use your custom counter.
remove the reset in body. It's not necessary and may cause unspecified effects.

See this

.largesection {
    counter-reset: my-sec-counter;
}

ol {
    list-style: none;
}

li {
    /* Increment "my-sec-counter" by 1 */
    counter-increment: my-sec-counter;
}
    
h2::before {     
  content: counter(my-sec-counter) ". Section " counter(my-sec-counter) ". ";
}

<div class="largesection">
  <ol>
    <li><h2>HTML Tutorial</h2></li>
    <li><h2>CSS Tutorial</h2></li>
  </ol>
</div>

<div>
  <ol>
    <li><h2>Bootstrap Tutorial</h2></li>
    <li><h2>SQL Tutorial</h2></li>
  </ol>
</div>

<div class="largesection">
  <ol>
    <li><h2>React Tutorial</h2></li>
    <li><h2>Vue Tutorial</h2></li>
  </ol>
</div>

Is it possible to use CSS Counters To Increment The Rotation Of An Element

No.

[Counter values] can be used with the ‘counter()’ and ‘counters()’ functions. ... [They] can be used by an author anywhere that accepts a <string>.

—CSS Lists Module Level 3

And rotate() doesn't accept a <string>:

‘rotate()’ = rotate( [ <angle> | <zero> ] )

—CSS Transforms Module Level 1

I thought maybe we could get around that with calc(), since it can be used in place of an <angle>, but

Components of a calc() expression can be literal values or ‘attr()’ or ‘calc()’ expressions.

—CSS Values and Units Module Level 3

No <string>s, so that still won't work.