Why doesn't the tick appear in my custom checkbox

Can anyone explain why the tick does not appear when I check my custom checkbox and help me fix the issue? I attempted to replicate the example from W3Schools and here is my code:

<div class="bottom">
  <div class="left">
    <div class="checkbox" style="margin-right: 3px;">
      <input type="checkbox">
    </div>
    <span>Remember me</span>
  </div>
  <span>Need help?</span>
</div>

Here is the CSS style for the code above:

.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.left {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Hide the actual checkbox */
input[type=checkbox] {
  opacity: 0;
  margin-right: 4px;
}

/* Create a custom checkbox*/
.checkbox::before {
  content: "";
  border: none;
  border-radius: 2px;
  height: 16px;
  width: 16px;
  position: absolute;
  background-color: #737373;
}

.checkbox::after {
  content: "";
  border: 3px solid;
  border-top: 0;
  border-left: 0;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 10ms;
}

.checkbox input:checked ~ .checkbox::after {
  opacity: 1;
}

Thanks in advance!