vertical-align

by Jason Park

HTML

<label class="container" style="font-size: 32px">
  <input type="checkbox" checked>
  <div style="width: 1em; height: 1em; border: 1px solid black">
  
  </div>
  <span class="checkmark"></span>
  One
</label>

CSS

input[type="checkbox"] {
  /* position: relative; */
/*   top: 0;
  left: 0; */
  appearance: none;
  
  &:checked::before {
    content: '';
    position: relative;
    display: inline-block;
    border: 1px solid black;
    width: 1em;
    height: 1em;
    top: 0.2em;
    /* transform: translateX(-50%); */
    /* vertical-align: baseline; */
  }
}