SOURCE

<input required/>
<div placeholdererror="这里是提示" placeholder="这里有填写值啦"></div>

input{
  border:none;
  border-bottom:1px solid darkblue;
  background-color:transparent;
  outline:none;
}
input:focus{
  border:none;
  border-bottom:1px solid darkblue;
}
div::after{
  font-size:12px;
  opacity:0.8;
}
input:not(:valid)~div::after{
  content:attr(placeholdererror);
  color:red
}
input:valid~div::after{
  content:attr(placeholder);
  color:green;
}