Estou tentando obter algumas sinalizações da interface do usuário nos elementos do formulário para o usuário após a validação funcionar usando os pseudo elementos do espaço reservado (começando pelas caixas de texto). O que eu quero é o::input-placeholder::after pseudo elemento a ser mostrado quando houver um valor na caixa de texto e também quando não houver um valor na caixa de texto (por exemplo, quando um valor inválido estiver presente ou quando um valor for necessário - deve aparecer o vermelho "X "na extremidade direita da caixa de texto através do::input-placeholder::after pseudoelemento).

Aqui está o violino:https://jsfiddle.net/edsinek/L8u7s25d/

Aqui está um trecho do CSS que estou usando para mostrar o "X" para um valor inválido:

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

Nota: no momento, estou apenas codificando para o Chrome, então perdoe as coisas específicas do kit da web.

Alguma ideia? Ou isso é algo que não é possível e depende da UA?