css3, I want to add :after at input:focus:invalid but doesn't work

[harinezumi]

Hallo, I'm trying to add a unicode HEAVY CHECK MARK ✔ and HEAVY BALLOT X ✘ to the input:focus:valid and input:focus:invalid respectively.I don't want to use a background-image as in many samples I found online.So I tried:

input:focus:invalid:after,  textarea:focus:invalid:after {content:"\2716";}input:focus:valid:after, textarea:focus:valid:after {content:"\2714";}

I also tried content:"X" and content:"OK" in case the problem was unicode.But this doesn't produce any result. Any idea?My documents are HTML5 and CSS.Thank you

[Ingolme]

:valid and :invalid are not CSS selectors as far as I know. That's probably your problem. You probably mean .valid and .invalid preceded by . and not :