#inner{
    position:relative;
    width:52px;
    height:20px;
    background:#d2d0d0;
    border-radius:50px;
    box-shadow:0 0 0 0px rgba(255,255,255,0.7);
  }
  #inner::before{
    content:'OFF';
    font-size:10px;
    color:white;
    line-height:20px;
    text-align:center;
    position:absolute;
    left:0px;
    width:30px;
    height:20px;
    background:#ababab;
    border-radius:48px;
    transition:left 0.4s ease-in-out;
  }
  #toggle{
    position:absolute;
    width:50px;
    height:20px;
    z-index:3;
    top: -5px;
    cursor:pointer;
    filter:opacity(0%);
  }
  #toggle:checked ~ #inner::before{
    content:"ON";
    color:#0f99e9;
    left:43%;
  }
  #toggle:checked ~ #inner{
    background:#79a2b4;
  }