Как правильно комбинировать псевдоэелемент ::before (и ::after) с :nth-child?

Question

[Illia T]

Вот фрагмент стиля (SCSS). Интересует ТРЕТИЙ элемент. Те, что идут дальше, в последствие будут преобразованы по примеру третьего.
СУТЬ: мне нужно добавить значок ДО и ПОСЛЕ плэйсхолдера. ДО будет всегда, а ПОСЛЕ - отметка о том, правильно ли заполнен инпут (появится после заполнения).
ПРОБЛЕМА: указанный код не выводит изображение, вот и пытаюсь выяснить почему.
Ну и раз уж пошла тема, на всякий случай, если есть время, подскажите механизм реализации задуманного, ну или вообще озвучьте любые попутные комментарии.

input{
    width: 100%;
    margin-bottom: 0.8rem;
    height: 2.1rem;
    background-repeat: no-repeat;
        &[required]{
            background-color: #f2f2f2;
        }
        &[placeholder]{
            padding-left: 38px;
        }
        &:nth-child(3)[placeholder]{
            &::before{
                content:url(img/phone.png);
            }
        }
        &:nth-child(4){
            background-image: url('img/email.png');
            background-position: left;
        }
        &:nth-child(5){
            background-image: url('img/building.png');
            background-position: left;
        }
}

Answer 1

[Алексей Уколов]

У инпутов нет псевдоэлементов, нужно использовать обёртку и стилизовать её через классы.

Comments

[Illia T]

Обёртка - в смысле label, где слева - инпут, а справа - пиктограмма?

[Алексей Уколов]

Или див. То, что больше всего вам подходит по смыслу.