你在CSS的最后一个块中有一个问题，就在这里：

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

说明：

您正在使用优先选择器选择类名checkbox的元素。上面的css块意味着：“搜索类checkbox的元素，并在其内部搜索一个输入元素，这是检查:checked和然后搜索类checkbox的元素，这是可用的选择的输入，这是设置检查或换句话说，搜索类checkbox的元素，它前面是input：检查的元素，但在你的html中，你没有元素后的输入标签，因此它是不工作的。此外，:after和:before选择器与实际的输入复选框重叠，因此您无法点击它。通过将两个选择器的z-index设置为-1来解决这一问题。
更正后的代码片段如下：

<div class="bottom">
 <div class="left">
  <div class="checkbox" style="margin-right: 3px;">
   <input type="checkbox">
   <div class='customcheckbox'></div>
  </div>
  <span>Remember me</span>
 </div>
 <span>Need help?</span>
</div>
 
.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

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

/* Hide the actual checkbox */
input[type=checkbox] {
  margin:0;
  width:16px;
  height:16px;
  opacity:0;
  cursor:pointer;
}

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

.customcheckbox::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;
  z-index:-1;
  transition: opacity 10ms;
}

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

我希望我的解释清楚，解决方案也在你这边工作。干杯！

您的代码中有几个错误：
1.“remember me”文本应该在一个标签中链接到输入，否则它不会被选中
1.如果你完全隐藏输入，你应该把它设置为显示无，而不是不透明度0

div {
    position: relative;
}
/* Hide the actual checkbox */
input[type="checkbox"] {
    display: none;
}
label {
    margin-left: 20px;
}
/* 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:has(:checked)::after {
    opacity: 1;
}

<div class="checkbox" style="margin-right: 3px;">
      <input type="checkbox" id="remember">
    <label for="remember">Remember me</label>
</div>

此外，您应该添加JavaScript，以便在单击before时触发单击输入