title: Display content on Styled HTML checkbox
body: <p>My code is like below.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;title&gt;Title&lt;/title&gt;
          &lt;style&gt;
              body {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  min-height: 100vh;
                  background: #111111;
                  flex-direction: column;
              }
  
              input[type=&quot;checkbox&quot;] {
                  position: relative;
                  width: 120px;
                  height: 40px;
                  margin: 10px;
                  outline: none;
                  background: #222222;
                  -webkit-appearance: none;
                  cursor: pointer;
                  border-radius: 20px;
                  transition: 0.5s;
              }
  
              input[type=&quot;checkbox&quot;]:checked {
                  background: #20b7ff;
              }
  
              input[type=&quot;checkbox&quot;]:before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 80px;
                  height: 40px;
                  background-color: #ffffff;
                  border-radius: 20px;
                  transform: scale(0.98, 0.96);
                  transition: 0.5s;
              }
  
              input[type=&quot;checkbox&quot;]:after {
                  content: 'Hello';
              }
  
              input[type=&quot;checkbox&quot;]:checked::before {
                  left: 50px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;label&gt;
              &lt;input type=&quot;checkbox&quot; name=&quot;btn&quot; /&gt;
          &lt;/label&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  <p>I am getting output like below.</p>
  <p><a href="https://i.stack.imgur.com/5TZB7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5TZB7.png" alt="enter image description here" /></a></p>
  <p>I would like to show some content on right side When the white button is at left side.</p>
  <p><a href="https://i.stack.imgur.com/vsgTT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vsgTT.png" alt="enter image description here" /></a></p>