Sergen23

Для тех, кто в дальнейшем будет искать ответ на подобный вопрос, дополню.

Псевдоэлементы :before не добавляются к элементам типа input или img, которые не имеют своего содержимого. Решение - обернуть их в div и уже к ним применять эти псевдоэлементы.

Для того чтобы он работал правильно - нужно задать псевдоэлементу свойство display, например inline-block. То что показывается второй - это магия. Подобную магию вы сможете наблюдать, если в инспекторе хрома поставите первому псевдоэлементу насильно display: block, а потом просто уберете это свойство.

Не хватает символа в content: ""; Просто ради интереса любой добавьте и :before появится

Там примерно так https://jsfiddle.net/jvsc4yoj/
Выводить всегда (в цикле php например)
а так вы можете скрыть последний пункт https://jsfiddle.net/jvsc4yoj/1/ чтобы не заморачиваться с php

Блоку div даешь overflow: hidden, а картинке background-size: 100% auto. И все, будет работать на ура)

https://git-scm.com/download/gui/windows

Вот отличные примеры.
shpargalkablog.ru/2013/12/input-before-after.html