How to make an HTTP/CSS Checkbox Slider to work properly?
<p>I'll be glad if you can help me.
I was required to develop a checkbox slider.</p>

<p>The issue is that when I click on the Slider I need that 2 things will happen:</p>

<ol>
<li><p>When the slider block is on left, the "Specific" word will be hidden
and will be shown only after clicking the block which will turn to 
the right side.</p></li>
<li><p>That the sliding will be in an animation.</p></li>
</ol>

<p>Here's the code:</p>

<pre><code>HTML:
=====
&lt;div class="checkboxThree"&gt;
   &lt;input type="checkbox" value="0" id="checkboxThreeInput" name="" /&gt;
   &lt;label for="checkboxThreeInput"&gt;&lt;/label&gt;
&lt;/div&gt;

CSS:
====
/**
 * Checkbox Three
 */
.checkboxThree {
    width: 95px;
    height: 16px;
    background:#A22452;
    border-radius: 50px;
    position: relative;
    margin:0 auto;
    margin-top: 5px;
}

    /**
     * Create the text for the "All" position
     */
    .checkboxThree:before {
      content: 'All';
      position: absolute;
      top: -1px;
      left: 70px;
      height: 2px;
      color: #F9F9F9;
      font-size: 14px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-weight: bold;
    }

    /**
     * Create the label for the "Specific" position
     */
    .checkboxThree:after {
       content: 'Specific';
       position: absolute;
       top: -1px;
       left: 4px;
       height: 2px;
       color: #F7A6F4;
       font-size: 14px;
       font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
       font-weight: bold;
    }

    /**
     * Create the pill to click
     */
    .checkboxThree label {
        display: block;
        width: 32px;
        height: 14px;
        border-radius: 50px;
        transition: all .5s ease;
        cursor: pointer;
        position: absolute;
        top: 1px;
        z-index: 1;
        /* left: 12px; */
        background: #08EFEF;

    }

    /**
     * Create the checkbox event for the label
     */
    .checkboxThree input[type=checkbox]:checked + label {
        left: 62px;

    }

link: https://jsfiddle.net/gtq792sa/
</code></pre>

<p>Can you please show me how to fix it ?</p>