title: How to change the content on a switch using before and after classes?
body: <p>I need to place a content on a slider switch by using css but Iam unable to get the after class for a content.</p>
  
  <p>Below is my html and css code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .slider {
     position: absolute;
     cursor: pointer;
     top:0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
  }
  .slider:before {
      position: absolute;
      content: "Y";
      font-weight: bold;
      vertical-align: center;
      font-size:14px;
      color:white;
      height: 26px;
      width: 26px;
      left: 0px;
      right:0px;
      bottom:-6px;
      background-color: #2196F3;
      -webkit-transition: .4s;
      transition: .4s;
  }
  .slider:after {
      position: absolute;
      content: "N";
      font-weight: bold;
      vertical-align: center;
      font-size:14px;
      color:white;
      height: 26px;
      width: 26px;
      left: 0px;
      right:0px;
      bottom:-6px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
  }
  
  input:checked + .slider {
     background-color:#6ab8f7;
  }
     input:focus + .slider {
     box-shadow: 0 0 1px #6ab8f7;
  }
     input:checked + .slider:before {
     -webkit-transform: translateX(20px);
     -ms-transform: translateX(20px);
     transform: translateX(20px);
  }
  .slider.round {
     border-radius: 34px;
  }
  .slider.round:before {
      border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="switch"&gt;
  &lt;input type="checkbox"&gt;
  &lt;div class="slider round"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This was the output I got.</p>
  
  <p><a href="https://i.stack.imgur.com/TQwTz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQwTz.png" alt="enter image description here"></a></p>
  
  <p>But I need to change the content to "N" and color of the slider to "white". But in my case I am getting the following output by using after class.</p>
  
  <p><a href="https://i.stack.imgur.com/NAqCL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NAqCL.png" alt="enter image description here"></a></p>
  
  <p>I need to change the color and content when it is toggled.</p>