title: Need to create the order list numbers and alphabet numbers for the title using CSS
body: <p>I want to create the order numbers and order alphabet letters for the title using CSS.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h4.heading_numberlist{
      counter-increment: list-number;
      margin-top:12.0pt;
      margin-right:0in;
      margin-bottom:3.0pt;
      margin-left:0in;
      page-break-after:avoid;
      font-size:12.0pt;
      font-family:"Arial",sans-serif;
      color:black;
      font-weight:bold;
      
  }
  h4.heading_numberlist::before{
     content: counter(list-number, decimal) '. ';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="topic nested3"&gt;
  &lt;h4 class="heading_numberlist"&gt;Services&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="topic nested3"&gt;
  &lt;h4 class="heading_numberlist"&gt;Tests&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="topic nested3"&gt;
  &lt;h4 class="heading_numberlist"&gt;Number&lt;/h4&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But its not working. Expected Output is:</p>
  <pre><code>1. Services
  2. Tests
  3. Number
  </code></pre>
  <p>Meanwhile for the Alphabetic titles change into</p>
  <pre><code>A. Services
  B. Tests
  C. Number
  </code></pre>