Q:

¿Cómo poner texto a un checkbox?

Realicé un <input type="checkbox"/> pero quiero ponerle texto dentro y que cambie en base a la selección. ¿Cómo puedo realizar esto?
Éste es mi código HTML:
 <div class="swtich-container">
            <input type="checkbox" id="switch">
            <label for="switch" class="lbl"></label>
</div>

Éste es el CSS:
.lbl{      
        display: inline-block;
        width: 65px;
        height: 33px;
        background: #979797;
        border-radius: 100px;
        cursor: pointer;
        position: relative;
        transition: .2s;
    }  

    .lbl::after {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background: #eee;
        border-radius: 100px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: .2s;
    }

    #switch:checked + .lbl::after {       
        left: 36px;
    }

    #switch:checked + .lbl {       
        background: #02889B;
    }

    #switch {
        display: none;
    }

Algo así y que cambie a off:

A:

Tienes una buena estructura ya creada, solo te resta agregar las palabras ON y OFF.
Para lograrlo solo debes enmarcar todo tu checkbox en una etiqueta label luego tu div y por ultimo los span con el texto correspondiente.

<label class="swtich-container">
  <input type="checkbox" id="switch">
      <div class="slider">
      <span class="on">ON</span>
      <span class="off">OFF</span>
   </div>
</label>

Por supuesto hay otras formas de estructura este código pero lo veo conveniente de esta manera.

Inserte una clase para el div con el nombre slider y otra para los span con un nombre acorde a al texto insertos en ellos on y off.

A la clase slider la utilizaremos para ocultar uno de los textos, dependiendo de cual este seleccionado. 
Apartir de los display tanto block como none.

A las clases on y off la utilizaremos para organizar los textos dentro de nuestro switch. 

.swtich-container {
    position: relative;
    display: inline-block;
    width: 65px; /* Anoche del contenedor */
    height: 30px; /* Alto del contenedor */
    border-radius:20px;
    border:3px solid rgba(2, 137, 155, 0.050); /* Bordeado fuera del switch */
  }
  
  .swtich-container input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #979797;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 24px; /* Alto de la bola */
    width: 24px; /* Ancho de la bola */
    left: 4px; /* Ubicacion Izquierda de la bola */
    bottom: 3.5px; /* Ubicacion Arriba-Abajo de la bola */
    background-color: white; /* Color de la bola */
    -webkit-transition: .2s; /* Velicidad de transición */
    transition: .2s; /* Velicidad de transición de Webkit*/
  }
  
  input:checked + .slider {
    background-color: #02889B;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(32px); /* Desplazamiento Webkit*/
    -ms-transform: translateX(32px); /* Desplazamiento */
    transform: translateX(32px); /* Desplazamiento */
  }
  
  
  /*------ Cambio ON y OFF ---------*/
  
  .on {
    display: none;
  }
  
  .on,
  .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }
  
  .on {
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }
  
  input:checked + .slider .on {
    display: block;
  }
  
  input:checked + .slider .off {
    display: none;
  }
  
  
  /* Slider */
  
  .slider {
    border-radius: 17px;
  }
  
  .slider:before {
    border-radius: 50%;
  }
<label class="swtich-container">
 <input type="checkbox" id="switch">
     <div class="slider">
     <span class="on">ON</span>
     <span class="off">OFF</span>
 </div>
</label>

Inserte algunos comentarios dentro del CSS para que te puedas ubicar si no entiendes algo.
Ten en cuenta que si tienes que modificar algo relacionado con el tamaño de uno de los componentes tendrás que hacer lo mismo con el resto objetos para conseguir una buena simetría en los componentes. 

Por supuesto esto no deja de ser un input el cual lo puedes anclar con javascript.

Puedes agregar un atributo como onclick
<input type="checkbox" id="switch" onclick="validate()">

Podríamos plasmar un texto.

function validate() {
    if (document.getElementById('switch').checked) {
        text.innerHTML = "ON";
    } else {
        text.innerHTML = "OFF";
    }
}
.swtich-container {
    position: relative;
    display: inline-block;
    width: 65px; /* Anoche del contenedor */
    height: 30px; /* Alto del contenedor */
    border-radius:20px;
    border:3px solid rgba(2, 137, 155, 0.050); /* Bordeado fuera del switch */
  }
  
  .swtich-container input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #979797;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 24px; /* Alto de la bola */
    width: 24px; /* Ancho de la bola */
    left: 4px; /* Ubicacion Izquierda de la bola */
    bottom: 3.5px; /* Ubicacion Arriba-Abajo de la bola */
    background-color: white; /* Color de la bola */
    -webkit-transition: .2s; /* Velicidad de transición */
    transition: .2s; /* Velicidad de transición de Webkit*/
  }
  
  input:checked + .slider {
    background-color: #02889B;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(32px); /* Desplazamiento Webkit*/
    -ms-transform: translateX(32px); /* Desplazamiento */
    transform: translateX(32px); /* Desplazamiento */
  }
  
  
  /*------ Cambio ON y OFF ---------*/
  
  .on {
    display: none;
  }
  
  .on,
  .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }
  
  .on {
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 14px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }
  
  input:checked + .slider .on {
    display: block;
  }
  
  input:checked + .slider .off {
    display: none;
  }
  
  
  /* Slider */
  
  .slider {
    border-radius: 17px;
  }
  
  .slider:before {
    border-radius: 50%;
  }
<body>
    <label class="swtich-container">
        <input type="checkbox" id="switch" onclick="validate()">
            <div class="slider">
            <span class="on">ON</span>
            <span class="off">OFF</span>
        </div>
    </label>
    <h1 id="text"></h1>
</body>

Actualización

Como te explicaba en la sección de comentarios (Véase aqui) creo haber cometido un error en el anidado de etiquetas, como lo comentan en este hilo de stackoverflow ingles. 

Al parecer es posible pero no recomendable la supremacía de una label sobre un div. 

Por ende y para obedecer los estandartes editare el codigo.

Veras que se simplifico mucho mas y que es muy parecido al publicado por ti con unos mínimos cambios.

.lbl{      
  display: inline-block;
  width: 65px;
  height: 33px;
  background: #979797;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: .2s;
  border-radius:20px;
  border:3px solid rgba(0, 0, 0, 0.178); /* Bordeado fuera del switch */
}  

.lbl::after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: #eee;
  border-radius: 100px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: .2s;
}

#switch:checked + .lbl::after {       
  left: 36px;
}

#switch:checked + .lbl {       
  background: #02889B;
  border-radius:20px;
  border:3px solid #B6D2EB; /* Bordeado fuera del switch */
}

#switch {
  display: none;
}

.on, .off {
    color: white; /* Color ON-OFF */
    position: absolute; /* Posicion */
    transform: translate(-50%, -50%);
    top: 25%;
    left: 25%;
    font-size: 11px; /* Tamaño de letra */
    font-family: Verdana, sans-serif; /* Fuente de letra */
  }

  .on {
    top: 15px; /* Ubicacion Arriba-Abajo de la palabra ON */
  }
  
  .off {
    left: auto;
    right: -3px; /* Ubicacion Derecha de la palabra OFF */
    top: 15px; /* Ubicacion Arriba-Abajo de la palabra OFF */
  }

#switch:checked + .lbl .on {
  display: block;
}

#switch:checked + .lbl .off {
  display: none;
}
<div class="swtich-container">
 <input type="checkbox" id="switch">
 <label for="switch" class="lbl">
     <span class="on">ON</span>
     <span class="off">OFF</span>
 </label>
</div>

La explicación anterior a la Actualización sigue siendo valida para los cambios echos en esta.

