As replaced elements can’t take advantage of
::after users really need this so that they can style error messages whilst using native browser validation. Adoption of pattern and other HTML5 validation is very low and I think it is because of this.
:user-error is useful however it doesn’t really help us with getting the error message into the label element for use with
::after, if that were the case then it would be only required to provide a way to hide native errors rather than change their appearance.
border: 1px solid red;
content: attr(validationMessage) "\n" attr(title);
This pseudo element just needs to have a
z-index higher than other elements which is similar to a dialog element.