/*
 * Not your usual CSS counters
 * (three interesting aspects)
 */

⚠️

.Example > .Warning::before {
  content: "Do not use in production" !important;
}

.Example > .Warning::after {
  content: "Experiment responsibly" !important;
}

/*
 * 1. Rendering the Counters
 *    (not just the numbers)
 */

content: counter(my-counter, var(--type)) ") ";

--type: decimal
--type: lower-greek
--type: upper-latin
--type: lower-roman
🙀 ???
🐶 ???!!

ol > li::before {
  counter-reset: my-counter var(--value);
}

<ol>
  <li style=" --value: 2074 ">🙀</li>
  <li style=" --value: 199990692 ">🐶</li>
</ol>

working example of an encoder

codepen.io/kizu/pen/yQyRJm

working example of a keyboard

codepen.io/kizu/pen/KGJqea

/*
 * 2. Unusual Inheritance
 *    (siblings & children)
 */

.foo {
  counter-increment: foo 1;
}
.foo::before {
  content: "before: " counter(foo);
}
.foo::after {
  content: "after: " counter(foo);
}

<div class="foo">
  <div class="foo"></div>
  <div class="foo">
    <div class="foo"></div>
  </div>
</div>
<div class="foo">
  <div class="foo"></div>
</div>

/*
 * 3. Counters and Layout
 *    (symbols can matter)
 */

content: counter(my-counter);

1
10
100
PUPPER

gif of some binary logic

kizu.dev/counters-and-stones

gif of a game played at goban

kizu.dev/counters-and-stones

Matrix-like view over the gomoku example with counters visible

/*
 * Thanks!
 * Experiment responsibly.
 *
 * These slides: kizu.dev/counters
 * (with links)
 *
 */