JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<span></span>

SCSS

@for $i from 1 through 100 {
  *:nth-of-type(#{$i} of input:checked)~span:before {
    content: 'there are more checked than unchecked'
  }
  *:nth-of-type(#{$i} of input:not(:checked))~span:before {
    content: 'there are more unchecked than checked'
  }
}