title: how to make css :after / :before content clickable on a label element
body: <p>Hi i have this html code:</p>
  
  <pre><code>&lt;input type="checkbox" id="button2"&gt;
  &lt;label for="button2"&gt;something here&lt;/label&gt;
  </code></pre>
  
  <p>So the idea is when I click on the label, the checkbox is going to be activated. Now if I add this css</p>
  
  <pre><code>label:before{
    content:'some content';
  ...
  }
  </code></pre>
  
  <p>of course I know that there is no reason to add that through css but just a simplified example, to help me explain myself. </p>
  
  <p>Now I want to be able to click on 'some content' generated will css and I want it to have the same effect as the label. So when I click on 'some content' the checkbox would be activated. Can that be done</p>
  
  <p>Thanks</p>