How to instigate action when input is checked in SCSS?

Its very simply and I have looked at all these examples but still am not able to figure out what I am doing wrong!

I have created a custom checkbox, increased the size and style, and when it is clicked I want the letter "A" to appear in the box, but it simply will not respond, maybe a second pair of eyes will help me identify the problem.

below is my html and css:

           .container {
                position: relative;
                cursor: pointer;
                display: block;

                input,
                label {
                    display: inline-block;
                }

                input {
                    // opacity: 0;
                    position: absolute;
                    height: unset;
                    width: unset;
                    cursor: pointer;
                }

                label::before {
                    border: 1px solid #333;
                    content: "";
                    display: inline-block;
                    font: 16px/1em sans-serif;
                    height: 50px;
                    margin: 0 .25em 0 0;
                    padding: 0;
                    vertical-align: top;
                    width: 50px;
                    border-radius: 5px;
                    color: red;
                    font-size: 50px;
                    padding: 10px;
                }
            input[type="checkbox"]:checked + label::before {
                content: "A"; //code for checked
             }
             
            }

<div class="container">
<div>
<label for="form_agreeTerms" class="required">Agree terms</label>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">          
</div>
</div>

here it is in codepen