For problem solvers: CSS Pseudo Element Checkbox not changing on "checked" state [duplicate]

For everyone who loves solving problems: here is one.

I tried to customize a checkbox with a pseudo element. But the checkbox won't change after it's checked.

<div class="c-form-check">
  <label>
    <input type="checkbox">Test
  </label>
</div>

.c-form-check input[type=checkbox] {
  opacity: 0.2;
}

.c-form-check label::before{
  content: '';
  display: inline-block;
  font-weight: normal !important;
  border: 1px solid #676767;
  min-height: 1.375rem;
  min-width: 1.375rem;
  max-height: 1.375rem;
  max-width: 1.375rem;
  margin-top: 0;
  z-index: 1;
  margin-right: .5rem;
  box-shadow: none;
}

.c-form-check:hover label::before {
  border: 1px solid #888888;
}

.c-form-check input[type=checkbox]:checked + label::before {
  background-image: none;
  border: 1px solid @grau6;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 10px green;
}

Do you see the problem? Help me to solve it! https://jsfiddle.net/9d3czhor/9/