JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Custom list counter styles with CSS</title>
 </head>
<body>

<h1>Custom list counter styles with CSS</h1>

<p>Tested in this page:</p>
<ul>
  <li>basic list counter</li>
  <li>positive increments > 1</li>
  <li>negative increments</li>
</ul>

<p>This test page uses CSS rather than HTML attributes. We're using a custom
CSS counter (no way to use/overwrite the default list counter?). CSS 2.1
reference: <a href="http://www.w3.org/TR/CSS2/generate.html#counters">http://www.w3.org/TR/CSS2/generate.html#counters</a>.</p>

<p>Note that, in CSS 2.1, it seems that there is no way to count backwards
(for instance for a list of 6 elements you would have 6, 5, 4, …). To get
this effect with CSS counters, you would need to know how many items there
are in the list, start from this (<code>counter-reset</code>) and use a
negative increment.</p>

<h2>Basic list counter</h2>
<ol>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>  
  <li>Item E</li>
  <li>Item F</li>


</ol>

<h2>Counting from 50</h2>
<ol class="start-p50">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
</ol>

<h2>Counting in tens, from 50</h2>
<ol class="start-p50 increment-p10">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
</ol>

<h2>Negative increment (-1), starting from -10</h2>
<ol class="start-m10 increment-m1">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
</ol>

<h2>Negative increment (-10), starting from 50</h2>
<ol class="start-p50 increment-m10">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
</ol>

<h2><em>Illusion</em> of <code>&lt;ol reversed&gt;</code></h2>
<ol class="start-p5 increment-m1">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ol>
<p>I said it was an illusion, right?<br>
Look, not working with more (or less) items:</p>
<ol class="start-p5 increment-m1">
  <li>Item A</li>
...

CSS

ol {list-style: none; counter-reset: iWantAPony  0;}
  ol.start-p50 {counter-reset: iWantAPony 50;}
  ol.start-p5 {counter-reset: iWantAPony 5;}
  ol.start-m10 {counter-reset: iWantAPony -10;}
  
  /* Incrementing with each LI */
  ol > li + li {counter-increment: iWantAPony 1; }
  ol.increment-p10 > li + li {counter-increment: iWantAPony 10;}
  ol.increment-m1 > li + li {counter-increment: iWantAPony -1;}
  ol.increment-m10 > li + li {counter-increment: iWantAPony -10;}
  
  /* Adding the current counter value */
  ol > li:before {content: counter(iWantAPony) " \2014  "; color: green;