В CSS псевдоэлементы ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку эти элементы, так называемые "замещаемые элементы", специальная категория объектов, описанная в разделе "Рендеринг" стандарта HTML:

Следующие элементы могут быть полностью заменены:
audio, canvas, embed, iframe, img, input, object, video.

Участник CSS Working Group под ником fantasai объясняет это на GitHub:

Замещаемые элементы могут полностью заменить все содержимое элемента, в том числе псевдоэлементы ::before и ::after. Вот почему в замещаемых элементах не работают псевдоэлементы.

Например, невозможно использовать ::before для элемента img, чтобы отобразить альтернативный текст (alt) - при этом метод сработает для других элементах (например на параграфе p).

/* This doesn’t work! */
img::before {
  content: attr(alt);
}

В зависимости от браузера и других факторов, элемент img иногда может быть не замещаемым. Например, если изображение не загружается, у нас появляется возможность добавить ::before и ::after к img (эта возможность есть только в Chrome и Firefox).

Ситуация становится более запутанной, когда дело касается элементов формы. Элементы input и textarea, в настоящее время рассматривается как "частично замещенные" - определение, которое использует Tab Atkins (редактор спецификаций CSS) в обсуждениях Working Group на GitHub.

Так или иначе, возможность добавления ::before и ::after для полей ввода зависит от типа input и используемого браузера. Например, Chrome и Safari поддерживают свойство content для input type="checkbox" и input type="radio".

input::before {
  content: '💔';
  line-height: 1;
  vertical-align: top;
  position: relative;
  left: -1.5em;
}

input:checked::before {
  content: '❤️';
}
Применение ::before для checkbox в Chrome (демо)

Если у вас возникли проблемы с использованием ::before или ::after для какого либо элемента, не забудьте проверить, не является ли этот элемент полностью или частично замещаемым элементом.