How to instigate action when input is checked in SCSS? - html

Question

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

Answer 1

You using the + operator, which means "The next sibling element".
You must move the label to be after the checkbox.
<div class="container">
<div>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
<label for="form_agreeTerms" class="required">Agree terms</label>
</div>
</div>