title: CSS update :after when input is checked
body: <p>Please note the HTML cannot be modified.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="form-group newsletter"&gt;
      &lt;div class="checkbox"&gt;
          &lt;label&gt;&lt;input name="newsletter" type="checkbox" value="Sign me up for exclusive discounts and style advice by email, post and text" aria-invalid="false"&gt;Sign me up for exclusive discounts and style advice by email, post and text&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SASS:</strong></p>
  
  <pre><code>.form-group {
      input {
          opacity: 0;
      }
      label {
          &amp;:after {
              float: left;
              display: block;
                  content: "";
              width: 52px; height: 52px;
                  margin-right: 35px;
              background: url('../img/checkbox-default.png') no-repeat;
          }
          input:checked ~ &amp;:after { // This. Not sure how to make this work
              background: url('../img/checkbox-checked.png') no-repeat;
          }
      }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/dfx78wob/" rel="nofollow">https://jsfiddle.net/dfx78wob/</a></p>