Pseudo class and Pseudo element

Need to use both on one element, but it's not working.

by Jake

HTML

<p>
No double quotes please.
</p>
<input type="text" pattern='[^"]*' name="att">

CSS

input {
  color: black;
}
input:invalid {
  color: red;
}
input:invalid:after {
  content: 'no no';
  display: inline;
  color: red;
}