I'm trying to come up with some good default styling for <input>
s in HTML5 and tried the following:
input::after { display: inline; }
input:valid::after { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }
Alas, the ::after
content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-selector; I've tried it without the :valid
and :invalid
. I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid
and :invalid
pseudo-selectors, but I tried it without those.)
The pseudo-elements work fine on <div>
, <span>
, <p>
, and <q>
elements -- some of which are block elements and some are inline.
So, my question is: why do browsers agree that <input>
s don't have an ::after
? I can't find anything in the spec that would indicate this.