Как вставить иконку через псевдоэлемент тегу input?

Question

[Дамир Габдрахимов]

Добрый день, пилил на днях HTML-форму, решил вставить текстовому input иконку через псевдоэлемент, почему-то не вставляется? Можно ли для тега input создать псевдоэлемент?
Ниже мой код.
спасибо.

.form__name {
    position: relative;
}

.form__name::after {
    position: absolute;
    content: '';
    display: block;
    height: 45px;
    width: 45px;
    background-color: red;
    top: 0;
    right: 0;
}

<form class="form" action="#">
    <input class="form__name" type="text" placeholder="Введите свое имя..." />
</form>

Comments

[dpismenny]

Невозможно.

Answer 1

[Андрей Токмаков]

Псевдоэлементы добавляются до и после контента, соответственно блок должен содержать контент, input не имеет закрывающего тега и не содержит контента, по этому ему нельзя присваивать псевдоэлементы

Update:
https://jsfiddle.net/xNPC/g2joo2qo/

Comments

[Андрей Токмаков]

В Вашем случае нужно просто обернуть input чем нибудь и присвоить этому блоку псевдоэлемент

[Андрей Токмаков]

https://jsfiddle.net/xNPC/g2joo2qo/

[Дамир Габдрахимов]

спасибо супер

Answer 2

[Сергей Зеленский]

нельзя псевдоэлемент в input

Answer 3

[sergey]

это можно сделать и так к примеру

input{
    background-image: url(../img/user.png);
    background-repeat: no-repeat;
    background-position: 95%;
}