html5 - 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:

   

   Hello

CSS:

.check:before {
   display: block;

   width: 100px;
   height: 100px;
   background: red;
   content:'';
}

input:checked ~ .check:before {
   content:'Content';
}

JSFiddle: https://jsfiddle.net/pgkwn4j6/