<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
body {
  counter: i;
}

div {
  counter-increment: i;
}

div::after {
  /* works for generated content  */
  content: 'i == ' counter(i);
  /* does not work anywhere else */
  background: hsl(calc(counter(i) * 10), 50%, 50%);
}


/* styles... */
body {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

div {
  display: flex;
  flex: 1 0 auto;
  white-space: nowrap;
}
  
div::after {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  padding: 0.5em 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.