<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.