切换错误，斜向移动而不是直线移动

Answer 1

您还需要将

translateY: -50%

添加到切换转换中，如果不这样做，该值将不会添加到转换中：

.toggle {
  height: 0;
  width: 0;
  opacity: 0;
}

.label {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  display: block;
  background-color: #ebebeb;
  box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2) inset;
  left: 10px;
  padding-left: 5px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50px;
    background-color: green;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
  }
}

.toggle:checked ~ .label::after {
  transform: translateX(32px) translateY(-50%);
}

Answer 2

一种解决方案是：

&::after {
  ...
  top: 4px
  transform: translateX(0);
  ...
}

.toggle:checked ~ .label::after {
  transform: translateX(28px);
}

注意从translateY 到translateX，因为你是水平移动，所以根本不需要设置Y 轴。