Não consigo dimensionar os ícones

Olá pessoal! Tudo bem?

No exercício 05 estou tentando dimensionar os ícones mas não consigo. Podem ver que no código usei width: 0 e height: 0 mas mesmo assim os ícones estão maiores que o input. Alguém pode me explicar por que está acontecendo isso? Nesse caso qual a saída para dimensionar os ícones?

HTML
<main>
            <h1 class="titulo-principal">Contato</h1>
            <fieldset>
                <legend>Dados pessoais:</legend>
                <label class="com-icone" for="nome">Nome:</label>
                <input type="text" id="nome" name="nome" placeholder="Digite seu nome" pattern="[A-Za-z ']{4,}" title="Mínimo de 4 caracteres" autofocus required>
                <label class="com-icone" for="email">Email:</label>
                <input type="email" id="email" name="nome" placeholder="seu@email.com" required>
            </fieldset>
            <fieldset>
                <legend class="assunto">Assunto:</legend>
                <input type="radio" id="blog" name="assunto" value="blog">
                <label for="blog">Blog</label>
                <input type="radio" id="servico" name="assunto" value="servico">
                <label for="servico">Serviço</label>
                <input type="radio" id="outro" name="assunto" value="outro">
                <label for="outro">Outro</label>
                <input id="outro-campo" name="outro-campo" placeholder="Outro assunto">
                <select name="assunto">
                    <option value="blog">Blog</option>
                    <option value="servico">Serviço</option>
                    <option value="outro">Outro</option>
                </select>
                <label class="mensagem" for="msg">Mensagem:</label>
                <textarea id="msg" cols="35" rows="10" name="mensagem" placeholder="Digite sua mesnsagem aqui"></textarea>
                <button type="submit"><strong>Enviar</strong></button>
            </fieldset>
        </main>

CSS
.com-icone {
    position: relative;
}

.com-icone::after {
    content: '';
    background-color: #8C1D3D;
    background-size: 50% 50%;
    width: 0;
    height: 0;
    padding: 1em;
    background-repeat: no-repeat;
    position: absolute;
    top: 100%;
    left: 0;
    background-position: center;

}

.com-icone + input {
    width: calc(100% - 2em);
    position: relative;
    left: 2em;
}

.com-icone[for="nome"]::after {
    background-image: url(../img/usuario.png);
}


.com-icone[for="email"]::after {
    background-image: url(../img/email.png);
}

Obrigada!