Cacher is the code snippet organizer for pro developers

.checkbox {
    @include font-label-5;
    color: $color-underline;


    input[type="checkbox"] {
        opacity: 0; position: absolute;
    }

    label {
        position: relative;
        display: inline-block;
        
        /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
        padding-left: 22px;
    }

    label::before,
    label::after {
        position: absolute;
        content: "";
        
        /*Needed for the line-height to take effect*/
        display: inline-block;
    }

    /*Outer box of the fake checkbox*/
    label::before{
        height: 12px;
        width: 12px;
        border: 1px solid;
        left: 0px;
        
        /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
        *to vertically center it.
        */
        top: 3px;
    }

    /*Checkmark of the fake checkbox*/
    label::after {
        height: 5px;
        width: 9px;
        border-left: 2px solid;
        border-bottom: 2px solid;
        
        transform: rotate(-45deg);
        
        left: 4px;
        top: 7px;
    }

    /*Hide the checkmark by default*/
    input[type="checkbox"] + label::after {
        content: none;
    }

    /*Unhide on the checked state*/
    input[type="checkbox"]:checked + label::after {
        content: "";
    }

    /*Adding focus styles on the outer-box of the fake checkbox*/
    input[type="checkbox"]:focus + label::before {
        outline: rgb(59, 153, 252) auto 5px;
    }

}

<div class="checkbox">
    <input type="checkbox" id="checkbox_1">
    <label for="checkbox_1">Pure CSS Checkbox</label>
</div>