Html 显示✓；使用伪元素标记有效的输入字段

下面是我创建的一个尝试，它使用CSS

content

属性添加勾号以显示有效的必填字段，但是没有成功

因为我还没有见过这样做，难道就不可能这样做吗？仅仅使用JavaScript会更有效吗

我想听听人们对我应该如何实现此功能的看法，以获得用户反馈

input[type=text]：有效{
边框：1px纯绿色；
}
输入[类型=文本]：有效：之后{
内容:'✓';
颜色：绿色；
}

用户名：

输入

不能在

元素之前或之后有
：。尝试在输入周围包装一个
，然后执行
span:after

或者只在后面使用
img
元素，因为这也会起作用


演示：
我还使用来更改
span
的CSS类。
$（'[name=username]'）.keyup（函数（）{
if（$（'form'）.valid（）{
$（this.parent（）.removeClass（）.addClass（'isvalid'）；
}否则{
$（this.parent（）.removeClass（）.addClass（'notvalid'）；
}
})
span.isvalid:之后
{
内容:'✓';
颜色：绿色；
}
span.无效：之后{
内容：“×”；
颜色：红色；
} 
.isvalid输入[名称=用户名]{
边框：2倍纯绿；
}
.notvalid输入[名称=用户名]{
边框：2倍纯红；
}

用户名：

请参见演示，然后告知me@Xufox：它不是重复的。。因为他想应用：after来获得有效的输入，而不是任何输入preferable@MarkoMackic这就是我一直在寻找的答案。感谢you@AbdennourTOUMI有什么大区别？另一个问题的答案是，伪元素对于任何输入都是不可能的，那么为什么将它应用于特定的输入类会是一个完全不同的问题呢？即使是这里的一个答案也重申了这一点，并提供了一些备选方案，而另一个问题的任何答案都足以回答这个问题。