CSS псевдоэлемент input-placeholder :: after для отображения со значением или без значения в текстовом поле

Я пытаюсь настроить пользовательский интерфейс на элементы формы для пользователя после проверки, чтобы он работал с использованием псевдоэлементов-заполнителей (начиная с текстовых полей). Что я хочу это::input-placeholder::after псевдоэлемент, который должен отображаться, когда в текстовом поле есть значение, а также когда в текстовом поле нет значения (например, когда присутствует недопустимое значение или когда требуется значение - должен отображаться красный «X» "в дальнем правом углу текстового поля через::input-placeholder::after Псевдо-элемент).

Вот скрипка:https://jsfiddle.net/edsinek/L8u7s25d/

Вот фрагмент CSS, который я использую, чтобы показать «X» для недопустимого значения:

.input-invalid input[type=text]::-webkit-input-placeholder::after {
  content: "\2716"; // "X"
  font-size: 18px;
  color: #ff0000;
  padding-right: 0;
  float: right;
}

Примечание: в данный момент я пишу только для Chrome, так что простите за специфические вещи в вебките.

Есть идеи? Или это то, что невозможно и зависит от UA?