title: center a check/tick within a custom check box
body: <p>I am building a custom check box, the functionality is almost there but the styling has a way to go.</p>
  
  <p>I have a few problems,</p>
  
  <ol>
  <li>I need the check centered within the circle</li>
  <li>I only need the check to be active on click of the checkbox itself not the text to.</li>
  </ol>
  
  <p>Im afraid i cant seem to center the check without using padding left of position left.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;label for='product-45-45'&gt;
    &lt;input type='checkbox' style="float:left;" id='product-45-45' /&gt;
    &lt;div class="accord-text"&gt;
      &lt;strong&gt;header:&lt;/strong&gt; sub text
      &lt;strong&gt;more text!&lt;/strong&gt;
    &lt;/div&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>input[type=checkbox] {
    display: none;
  }
  
  input[type=checkbox] + .accord-text:before {
    width: 30px;
    height: 30px;
    border-radius: 200%;
    background-color: #d6e4ec;
    border: 1px solid #000;
    display: block;
    font-size: 150%;
    font-weight: 900;
    content: "";
    color: green;
  }
  
  input[type=checkbox]:checked + .accord-text:before {
    display: table;
    content: "\2713";
  }
  </code></pre>