Styling checkbox sibling element when checkbox is checked

Question

JSX:

<input 
type="checkbox" 
defaultChecked={myfilter.includes("Banana")}
/>
<span 
    onClick={onClickHandler}
    className="banana">Banana
</span>

Without React:

`<input 
    type="checkbox" 
/>
<span 
    className="banana">Banana
</span>`

The goal is to select and style the span element when the input element status is checked. The reason why I need to do this way is that the checkbox element is hidden by default. I tried this, but did not worked:

input[type="checkbox"]:checked + :after{
  background: yellow;
}

Answer 1

chamhe :after to span \

input[type="checkbox"]:checked + span{
 background: yellow;
}