Estoy tratando de obtener algunos indicadores de IU en los elementos de formulario para el usuario después de la validación para trabajar usando los pseudo elementos de marcador de posición (comenzando con cuadros de texto). Lo que quiero es el::input-placeholder::after pseudo elemento que se muestra cuando hay un valor en el cuadro de texto y cuando no hay un valor en el cuadro de texto (por ejemplo, cuando hay un valor no válido o cuando se requiere un valor, debe mostrar la "X" roja "en el extremo derecho del cuadro de texto a través de::input-placeholder::after pseudo-elemento).

Aquí está el violín:https://jsfiddle.net/edsinek/L8u7s25d/

Aquí hay un fragmento del CSS que estoy usando para mostrar la "X" para un valor no válido:

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

Nota: Solo estoy codificando para Chrome en este momento, así que perdona las cosas específicas del kit web.

¿Algunas ideas? ¿O es algo que no es posible y depende de UA?