<div id="stage">
  <input class="bullseye-input" id="b1" type="checkbox">
  <label class="bullseye" for="b1"></label>

  <input class="bullseye-input" id="b2" type="checkbox">
  <label class="bullseye" for="b2"></label>

  <input class="bullseye-input" id="b3" type="checkbox">
  <label class="bullseye" for="b3"></label>

  <input class="bullseye-input" id="b4" type="checkbox">
  <label class="bullseye" for="b4"></label>

  <input class="bullseye-input" id="b5" type="checkbox">
  <label class="bullseye" for="b5"></label>

  <input class="bullseye-input" id="b6" type="checkbox">
  <label class="bullseye" for="b6"></label>

  <input class="bullseye-input" id="b7" type="checkbox">
  <label class="bullseye" for="b7"></label>

  <input class="bullseye-input special" id="b8" type="checkbox">
  <label class="bullseye special" for="b8"></label>
  
  <p id="score"> points</p>
</div>

:root {
  --bullseye-points: 1;
  --bullseye-points-str: "1";
  --bullseye-special-points: 3;
  --bullseye-special-points-str: "3";
  counter-reset: points;
}

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

.bullseye-input:checked {
  counter-increment: points var(--bullseye-points);
}

.bullseye-input.special:checked {
  counter-increment: points var(--bullseye-special-points);
}

.bullseye:after {
  --points-str: var(--bullseye-points-str);
  content: "+" var(--points-str);
}

.bullseye.special:after {
  --points-str: var(--bullseye-special-points-str);
}

#score:before {
  content: counter(points);
}

/* Irrelevant styles ahead */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.bullseye {
  margin: 0 20px 20px 0;
}

#score {
  text-align: center;
  font-weight: 700;
  margin-top: 40px;
}

// Nothing to see here