How to add the text "ON" and "OFF" to toggle button

Question

On my project I wanted to add a text on my existing toggle code.So I wanted like this, When toggles ON it should display the text "ON" and display the "OFF" text if toggles off. I can't change it to other toggle because it's already have a backend using it. I just wanted only to input "ON" and "OFF" text. Thank you.

Here is my code

  .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%;

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

Answer 1

You could do it like this:

.switch {   position: relative;   display: inline-block;   width: 90px;   height: 34px; }  .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(55px);   -ms-transform: translateX(55px);   transform: translateX(55px); }  /*------ ADDED CSS ---------*/ .on {   display: none; }  .on, .off {   color: white;   position: absolute;   transform: translate(-50%,-50%);   top: 50%;   left: 50%;   font-size: 10px;   font-family: Verdana, sans-serif; }  input:checked+ .slider .on {display: block;}  input:checked + .slider .off {display: none;}  /*--------- END --------*/  /* Rounded sliders */ .slider.round {   border-radius: 34px; }  .slider.round:before {   border-radius: 50%;}

<label class="switch">  <input type="checkbox" id="togBtn">  <div class="slider round">   <!--ADDED HTML -->   <span class="on">ON</span>   <span class="off">OFF</span>   <!--END-->  </div> </label>

Or pure CSS:

.switch {   position: relative;   display: inline-block;   width: 90px;   height: 34px; }  .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;    border-radius: 34px; }  .slider:before {   position: absolute;   content: "";   height: 26px;   width: 26px;   left: 4px;   bottom: 4px;   background-color: white;   -webkit-transition: .4s;   transition: .4s;   border-radius: 50%; }  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(55px); }  /*------ ADDED CSS ---------*/ .slider:after {  content:'OFF';  color: white;  display: block;  position: absolute;  transform: translate(-50%,-50%);  top: 50%;  left: 50%;  font-size: 10px;  font-family: Verdana, sans-serif; }  input:checked + .slider:after {     content:'ON'; }  /*--------- END --------*/

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

Answer 2

.switch {    position: relative;    display: inline-block;    width: 90px;    height: 34px;  }    .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(55px);    -ms-transform: translateX(55px);    transform: translateX(55px);  }    /*------ ADDED CSS ---------*/  .on  {    display: none;  }    .on, .off  {    color: white;    position: absolute;    transform: translate(-50%,-50%);    top: 50%;    left: 50%;    font-size: 10px;    font-family: Verdana, sans-serif;  }    input:checked+ .slider .on  {display: block;}    input:checked + .slider .off  {display: none;}    /*--------- END --------*/    /* Rounded sliders */  .slider.round {    border-radius: 34px;  }    .slider.round:before {    border-radius: 50%;}

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">Confirmed</span><span class="off">NA</span><!--END--></div></label>