It appears that the code snippet you're using was copied from another website without fully understanding it, which is not ideal. Here is an updated version of the snippet with some modifications.
Explanation:
I have included .on and .off selectors in your CSS code to adjust the positioning of the ON and OFF text elements. Additionally, I changed the value of transform from 55px to transform: translateX(28px);. This adjustment prevents the default circle from going outside the element due to the transform size being larger than the toggle switch itself.
I recommend taking the time to understand any code snippets you use, even if you are copying them, so that you can troubleshoot potential issues like this more effectively.
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 17px;
}
.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: 13px;
width: 13px;
left: 2px;
bottom: 2px;
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(28px);
-ms-transform: translateX(28px);
transform: translateX(28px);
}
/*------ ADDED CSS ---------*/
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 25%;
left: 25%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
.on {
top: 8px;
}
.off {
left: auto;
right: -5px;
top: 8px;
}
input:checked+ .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>