How can I change the content of a div using check boxes

I am trying to have a checkbox change the content of a div but if the content isn't together(in the same div), then it will not work.

HTML:

        <div>
            <input type="checkbox" id="check">
            <label for="check">Hello</label>
        </div>

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

CSS:

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

JSFiddle: http://ift.tt/2fNo0rm