title: How to increase size of checkbox content css?
body: <p>How can i change the font size after selected <strong>checkbox</strong> <strong>content</strong></p>
  
  <p>This is my Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox-custom {
    opacity: 0;
    position: absolute;
  }
  .checkbox-custom, .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
  }
  .checkbox-custom-label {
    position: relative;
  }
  .checkbox-custom + .checkbox-custom-label:before {
    content: ' ';
    background: transparent;
    border: 1px solid #666666;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
  }
  .checkbox-custom:checked + .checkbox-custom-label:before {
    background: transparent;
    border: 1px solid #666666;
    content: 'X';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"&gt;
    &lt;label for="checkbox-1" class="checkbox-custom-label"&gt;checkbox1&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After Selected the checkbox </p>
  
  <blockquote>
    <p>content: 'X';</p>
  </blockquote>
  
  <p>font size increase . if is possible ??</p>
  
  <p>This is my <a href="https://jsfiddle.net/8cq25f08/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <p>current output</p>
  
  <p><a href="https://i.stack.imgur.com/I7Nkf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I7Nkf.png" alt="Current output"></a></p>
  
  <p>Expecting Output
  <a href="https://i.stack.imgur.com/kHtak.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kHtak.png" alt="Expecting output"></a> </p>