title: CSS checkbox styling trouble, "checked" styling won't appear
body: <p>Is there anything wrong with my styling or divs?
  This code is supossed to make a block serve as a checkmark inside this checkbox when you click it, I followed a tutorial and it was going great, it even made the example from it appear, but after I made some little changes to the size and so on, it disappeared and couldn't make it come back</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{
      display: block;
      width: 16px;
      height: 16px;
      background-color: #FFFF;
      border-radius: 0px; 
      border-style: hidden;  
      position: relative; 
      margin-top: 4px;
  }
  
  .checkbox ::after{
      position: absolute;
      width: 9px;
      height: 9px;
      align-content: center;
      background-color: #006972;
      opacity: 0;
      transition: all 0.4s;
  }
  #check:checked ~ .checkbox {
      opacity: 1;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
       &lt;input htmlFor="check" type="checkbox" id="check" name="check" value={check} onChange={(e) =&gt; isChecked(true)} hidden &gt;&lt;/input&gt;
                &lt;label for="check" className="checkbox"&gt;&lt;/label&gt;
                                  &lt;/div&gt;
     </code></pre>
  </div>
  </div>
  </p>