JSFiddle - React, Tailwind, and code Playground

by Amos Wong

HTML

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
  <div> 11</div>
</div>

CSS

#root {
  counter-reset: section;
}

#root > div.hide {
  counter-increment: section;
  width: 0;
  height: 0;
  overflow: hidden;
}

#root > .hide + div:not(.hide):before {
  color: red;
  display: block;
  height: 100%;
  width: 100%;
  content: counter(section) " element hidden";
}

#root > .hide + div:not(.hide) + div {
  counter-reset: section;
}