It will continue to work even if :checked is turned off

I'm making a checkbox using CSS, but even if checked is turned off in HTML, :checked in CSS is still turned on, so I can't switch it when I press the button.

Why is this? I would appreciate it if you could tell me more about this.

.slider-checkbox:checked + .slider-toggle {
  background-color: black;
}

.slider-checkbox:checked + .slider-toggle:after {
  transform: translateX(17px);
}