между .check и span находится текст, css правила нужно изменить
.check ~ span{
position: absolute;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #CCB26E;
display: inline-block;
border-radius: 3px;
}
.check ~ span:before{
content: '';
position: absolute;
background: url('pic.svg');
width: 20px;
height: 20px;
background-repeat: no-repeat;
top: 1px;
right: 0;
left: 2px;
bottom: 0;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.check:checked ~ span:before{
opacity: 1;
}
ну и да, у label есть for, в данном случае он не нужен