Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     .pvalues {
      counter-reset: valueA;
     }
     
     p::before {
      counter-increment: valueA 2;
      content: "Topic " counter(valueA) " - ";
     }
     
     .h2values {
      counter-reset: valueB;
     }
     
     h2::before {
      counter-increment: valueB +2;
      content: "Topic " counter(valueB) " - ";
     }
    </style>
  </head>
  <body>
    <div class="pvalues">
      <h4>Example for CSS Counter Increment</h4>
      <p>CSS </p>
      <p>Java</p>
      <p>HTML</p>
      <p>SQL</p>
      <p>PHP </p>
    </div>
    <hr>
    <h4>We can use "+"with values or directly we can define values. Both gives same result</h4>
    <div class="h2values">
      <h2>CSS </h2>
      <h2>Java</h2>
      <h2>HTML</h2>
      <h2>SQL </h2>
      <h2>PHP</h2>
    </div>
  </body>
</html>
​