CSS - Switch does not change text when clicked

Question

I have a checkbox that I turned into a switch so the user can choose "Yes" or "No": yes when it is clicked, not when it is not clicked. When the switch is not clicked, the "No" text appears as expected. However, when I click on the switch, the text does not change to "Yes" as expected. I would like to understand what might be causing this problem.

My CSS code is as follows::

  
    .switch {
        position: relative;
        display: inline-block;
        width: 105px;
        height: 34px;
    }
    
    .switch input {
        display: none;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }
    
    input[type="checkbox"]:checked + input[type="hidden"] + .slider,
    input[type="checkbox"]:checked + .slider {
        background-color: #2196F3;
    }
    
    input[type="checkbox"]:focus + input[type="hidden"] + .slider,
    input[type="checkbox"]:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }
    
    input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
    input[type="checkbox"]:checked + .slider:before {
        transform: translateX(69px);
    }
    
    .slider.round {
        border-radius: 34px;
    }
    
    .slider.round:before {
        border-radius: 50%;
    }
    
    .slider.round:after {
        content: 'NÃO';
        color: white;
        display: block;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 12px;
        font-family: Verdana, sans-serif;
    }
    
    input[type="checkbox"]:checked + .slider.round:after {
        content: 'SIM';
    }

<label class="switch">
                    <input data-val="true" data-val-required="O campo CandidatarOutros é necessário." htmlattributes="{ class = form-control, checked = True }" id="CandidatarOutros" name="CandidatarOutros" type="checkbox" value="true"> 
                    <div class="slider round"></div>
                </label>

As for HTML code, this is not 100% HTML code. Since I am working on ASP.NET, I am using one of their helpers to create checkboxes:

<label class="switch">
                    <input data-val="true" data-val-required="O campo CandidatarOutros é necessário." htmlattributes="{ class = form-control, checked = True }" id="CandidatarOutros" name="CandidatarOutros" type="checkbox" value="true"> 
                    <div class="slider round"></div>
                </label>