Checkbox div

HTML

<div class="example">
            <!-- In div tags --><div>
                 <h1>The checkbox is in a div so it doesn't work</h1>
                <input type="checkbox" id="check">
                <label for="check">Hello</label>
            <!-- In div tags --></div>

            <div class="check"></div>
        </div>

        <div class="example2">
             <h1>I'm trying to achieve this</h1>
            <!-- not in div tags --><input type="checkbox" id="check2">
            <label for="check2">Hello</label>

            <!-- not in div tags --><div class="check"></div>
        </div>

CSS

.check:before {
                display: block;
                width: 100px;
                height: 100px;
                background: red;
                content:'';
            }
            
 input:checked ~ .check:before {
                content:'Content';
            }