.checky {
  vertical-align: -.2rem;
  position: absolute;
  top: 4px
}

.checky__checker {
  display: inline-block;
  border: 1px solid var(--pen);
  height: 20px;
  width: 20px;
  border-radius: 3px;
  box-sizing: border-box;
}

.checky__checker::before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: var(--pen);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transition: opacity .25s;
}

:checked + .checky__checker::before {
  opacity: 1;
}