What is the correct way to combine the ::before (and ::after) pseudo-element with :nth-child?

Question

css

Here is the style snippet (SCSS). Interested in the third element. Those that go further will subsequently be transformed according to the example of the third.
ESSENCE: I need to add an icon BEFORE and AFTER the placeholder. BEFORE will always be, and AFTER - a mark on whether the input is filled in correctly (will appear after filling).
PROBLEM: the specified code does not display an image, so I'm trying to find out why.
Well, since the topic has already gone, just in case, if there is time, tell me the mechanism for implementing the plan, well, or even voice any incidental comments.

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

Inputs do not have pseudo-elements, you need to use a wrapper and style it through classes.