<div class="content">
  <div class="group">
    <div data="checkbox-check">
      <input type="checkbox" id="check" />
      <label for="check">ITEM</label>
    </div>
  </div>
</div>

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #efefef;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  background: #fff;
  & > div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
  }
}

[data='checkbox-check'] {
  position: relative;
  display: inline-block;
  line-height: 24px;
  input[type="checkbox"] {
    & ~ label {
      &:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 3px;
        left: -3px;
        width: 18px;
        height: 10px;
        border: 4px solid #191919;
        border-top-style: none;
        border-right-style: none;
        vertical-align: top;
        transition: transform .4s cubic-bezier(.45, 1.8, .5, .75);
        transform: rotate(-45deg) scale(0, 0);
      }
      &:after {
        vertical-align: top;
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: -6px;
        border: 1px solid #808080;
        width: 24px;
        height: 24px;
        background: #fff;
        cursor: pointer;
      }
    }
    &:checked ~ label {
      &:before {
        transform: rotate(-45deg) scale(1, 1);
      }
    }
  }
}