checkbox with label based on value using css only

in this demo developed by Ravi Makwana

by RaviMakwana

HTML

<input type="checkbox" id="chkActive" class="chkActive">
<label for="chkActive"><span></span></label>

CSS

.chkActive {
        display: none;
    }

        .chkActive + label :after {
            content: 'Deactive';
            width: 64px;
            text-align: center;
            position: absolute;
            margin-top: -9px;
            padding: 0px 8px;
            line-height: 1.2;
            border-radius: .25rem;
            color: #fff;
            background-color: #868e96;
            border-color: #868e96;
        }

        .chkActive:checked + label :after {
            content: 'Active';
            background-color: #28a745;
            border-color: #28a745;
        }