Почему не работает #form__checkbox:checked + .registration__check-label:after?

Я создал кастомный checkbox через псевдоэлементы label, теперь пытаюсь добавить opacity чтобы показать картинку check при отмеченном checkbox, но вот это:

    #form__checkbox:checked + .registration__check-label:after{
        opacity: 1;
    }

просто не работает

вот мой html:

<div class="registration__check">
    <input type="checkbox" value="1" name="form[]" id="check"/>
    <label for="check" class="registration__check-label">запомнить меня</label>
</div>

Вот мой scss:

&__check-label{
        cursor: pointer;
        font-weight: 300;
        font-size: 16px;
        line-height: 22px;
        color: #947E62;
        padding: 0px 0px 0px 30px;
        &:before{
            content:'';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 3px;
            left: 0;
            background-color: #D2B48C;
        }
        &:after{
            content:'';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 3px;
            left: 0;
            background: url('../../img/registration/check.png') no-repeat;
            background-size: 100%;
            opacity: 0;
        }
    }
#form__checkbox:checked + .registration__check-label:after{
     opacity: 1;
}

Только пожалуйста не пишите про то что структура scss не правильная, просто здесь не удобно вставлять код и я скопировал не весь, с scss проблем нету не работает конретно вот это:

    #form__checkbox:checked + .registration__check-label:after{
        opacity: 1;
    }

В чем может быть проблема?

PS: я бы мог сделать через js но у меня нарисован чекбокс с помощью псевдоэлементов, поэтому не знаю как