Top and left doesn't work with static element, you need to specify a relative, fixed or absolute position in order to use these property. You can try this :
input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 15px;
left: 250px;
color: green;
position: relative;
}
A full code :
input[type=checkbox]:focus+.icon {
background-position: 0 -822px;
}
input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
background-position: 0 -856px;
background-color: #2196F3;
display: block;
}
input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 5px;
left: 50%;
margin-left:-12px;
color: green;
position:relative;
}
input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
background-position: 0 -890px;
}
,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
background-position: 0 15.3%;
}
&.hasError .icon {
background-position: 0 -890px;
}
<input type="checkbox" required="required" name="terms" id="termsAgree" auto-required="true">
<span class="icon"></span>