Ich versuche, ein gutes Standard-Styling für @ zu finde<input>s in HTML5 und versuchte Folgendes:

input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }

Alas, das::after content wird nie angezeigt. Bei den Pseudoelementen ist dies kein Problem mit Doppel- oder Einfach-Doppelpunkten. Ich habe beides versucht. Es ist auch kein Problem, ein Pseudoelement und eine Pseudoklasse zu haben. Ich habe es ohne das @ versuc:valid und:invalid. Ich habe das gleiche Verhalten in Chrome, Safari und Firefox (Firefox hat nicht das:valid und:invalid Pseudo-Klassen, aber ich habe es ohne diese ausprobiert.)

Die Pseudo-Elemente funktionieren gut auf<div>, <span>, <p>, und<q> -Elemente - einige davon sind Blockelemente und andere Inline-Elemente.

Also, meine Frage ist: Warum stimmen Browser zu, dass<input>s haben kein::after? Ich kann nichts in der Spezifikation finden, das dies anzeigen würde.