In the following code I try to target the span that basically follows the checkbox in the document. So only the span that is in the same line as the checkbox is supposed to have a line-through once the checkbox is checked. Here is my HTML code:
.checkbox:checked + span{
text-decoration: line-through;
}
<ul>
<li>
<form action="#checked" class="form"><input type="checkbox" name="checkbox" class="checkbox">
</form>
<span>Clean the house</span>
</li>
</ul>
I know that this can't work because my span doesn't directly follow the .checkbox since the .checkbox is in a form. But I have no idea how to select the following span. Now, I have already tried to put the span inside the form. This would work then, but how can I select the span in the example above?