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;
}