In meinem Projekt wollte ich einen Text zu meinem vorhandenen Umschaltcode hinzufügen. So wollte ich, dass beim Einschalten der Text "EIN" und beim Ausschalten der Text "AUS" angezeigt wird. Ich kann es nicht in einen anderen Toggle ändern, da es bereits ein Backend gibt, das es verwendet. Ich wollte nur "EIN" und "AUS" Text eingeben. Vielen Dank

Hier ist mein Code HTML:

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>

CSS:

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;