Validating the field with just css

 I just learned that i could display the field validation without the use of js.

This is made possible with the use of selectors :valid and :invalid

 

HTML:

 

<form>
  <input type="email"  />
  <span class="email"></span>
</form>

 

CSS:

input {
  position: relative;
}

input:before {
  position: absolute;
  left: -20px;
}

input:invalid + span:before {
 content: "✖";
  color: red;
}

input:valid + span:before {
  content: "✓";
  color: green;
}