Consider this HTML structure:
<div>
<input type="radio" id="a" name="a"><label for="a">aaaa</label>
<input type="radio" id="b" name="a"><label for="b">bbbb</label>
<input type="radio" id="c" name="a"><label for="c">cccc</label>
<input type="radio" id="d" name="a"><label for="d">dddd</label>
</div>
Initially, all labels are not struck through. By clicking on a label, nothing happens. Let's change that using CSS:
input:not(:checked) + label {
text-decoration: line-through;
}
This implementation strikes through all labels when no radio button is checked, but we want only the selected label to be struck. Can this be achieved with CSS alone?
I experimented with a solution that partially works – it strikes through labels after the selected one. How do we target the first ones?
input[type="radio"]:checked+label+input+label,
input[type="radio"]:checked+label+input+label+input+label,
input[type="radio"]:checked+label+input+label+input+label+input+label {
text-decoration: line-through;
}
Demo available below
input[type="radio"]:checked+label+input+label,
input[type="radio"]:checked+label+input+label+input+label,
input[type="radio"]:checked+label+input+label+input+label+input+label {
text-decoration: line-through;
}<div>
<input type="radio" id="a" name="a"><label for="a">aaaa</label>
<input type="radio" id="b" name="a"><label for="b">bbbb</label>
<input type="radio" id="c" name="a"><label for="c">cccc</label>
<input type="radio" id="d" name="a"><label for="d">dddd</label>
</div>Related discussion: CSS selector for a checked radio button's label