using counter and @property (CSS Houdini)

by Konstantin Rouda

HTML

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

CSS

/* @property --num {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
} */


:root {
  /* --num: 1; */
}

HTML {
  /* animation: increment 2s infinite; */
}

@keyframes increment {
  50% { --num: 255;  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

UL {
    counter-reset: num-counter var(--num);
}

LI {
  position: relative;
  counter-increment: num-counter;
}

LI::before {
  content: counter(num-counter);
}