<p class="form-item">
  <input class="visually-hidden" type="checkbox" name="" id="test" />
  <label for="test">CSS is awesome</label>
</p>

.form-item {
  --primary-h: 240;
  --primary-s: 56%;
  --primary-l: 63%;
  --primary-alpha: 100%;
}

label {
  user-select: none;
}

input:checked + label {
  font-weight: bold;
  color: hsla(
    var(--primary-h),
    var(--primary-s),
    var(--primary-l),
    var(--primary-alpha)
  );

  &:before {
    --primary-alpha: 100%;
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='100pt' height='100pt' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m6.8008 56.5c-2-2-2-5.3984 0-7.3984l1.0977-1.1016c2-2 5.3984-2 7.3984 0l19.199 19.199 50.398-50.398c2-2 5.3984-2 7.3984 0l1.1016 1.1016c2 2 2 5.3984 0 7.3984l-58.895 58.898z'/%3E%3C/svg%3E%0A"),
      linear-gradient(
        hsla(
          var(--primary-h),
          var(--primary-s),
          var(--primary-l),
          var(--primary-alpha)
        ),
        hsla(
          var(--primary-h),
          var(--primary-s),
          var(--primary-l),
          var(--primary-alpha)
        )
      );
    background-size: 18px, 100%;
    background-position: center, center;
    background-repeat: no-repeat;
  }
}

label {
  position: relative;

  &:after {
    --primary-alpha: 0;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: hsla(
      var(--primary-h),
      var(--primary-s),
      var(--primary-l),
      var(--primary-alpha)
    );
    border-radius: 50%;
    z-index: -1;
    transform: scale(0);
    transition: 0.25s ease-in;
  }

  &:before {
    --primary-alpha: 30%;
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid
      hsla(
        var(--primary-h),
        var(--primary-s),
        var(--primary-l),
        var(--primary-alpha)
      );
    border-radius: 5px;
    margin-right: 0.5rem;
  }

  &:hover {
    cursor: pointer;

    &:after {
      --primary-alpha: 15%;
      transform: scale(1.75);
    }
  }
}

/* https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  padding: 2rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}