Newsletter Sign Up

I like to do these basic validations with css instead of js but this time, this doesn't work. I couldn't figure out the reason

input {
position: relative 
}

input:not(:placeholder-shown):invalid::after {
    content: "Valid email required";
    height: 16px;
    width: 16px;
    position: absolute;
    top:0;
    right:0;
  }