input[type='email']:invalid:after

[grmblfx]

Hallo,

laut Dokumentation (zB. https://css-tricks.com/almanac/selectors/i/invalid/) kann man :invalid mit weiteren Pseudo-Selektoren kombinieren.

Auf meiner Beispielseite http://yourmed.de/kontakt.php wird mit input[type='email']:invalid:after { content: "X"; }

aber nichts angezeigt (getestet in Firefox und chrome). Woran liegt das? Hat es evtl. etwas mit der flexbox-Positionierung zu tun?

Ich habe bisher überhaupt nur zwei Varianten gesehen:

• label nach dem input-Feld und dann input[type='email']:invalid + label:after { content: "X"; }

• ein span-Element o.ä. nach dem input

Beides finde ich nicht schön, geht es auch direkt mit dem input-Feld?

Gruß Daniel