使用 CSS 自动添加“必填字段”星号以形成输入

有什么好方法可以克服此代码无法按预期工作的不幸事实：

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

在一个完美的世界里，一切都需要inputs 将得到一个小星号，表明该字段是必填字段。这个解决方案是不可能的，因为 CSS 是插入在元素内容之后，而不是元素本身之后，但类似的解决方案是理想的。在具有数千个必填字段的网站上，我可以将星号移动到输入前面，只需更改一行即可（:after to :before）或者我可以将其移动到标签的末尾（.required label:after）或标签前面，或到容纳盒上的某个位置等...

这不仅在我改变主意将星号放置在哪里时很重要，而且对于表单布局不允许在标准位置放置星号的奇怪情况也很重要。它还可以很好地进行验证，检查表单或突出显示未正确完成的控件。

最后，它不添加额外的标记。

是否有任何好的解决方案具有不可能代码的全部或大部分优点？

这就是你的想法吗？

http://jsfiddle.net/erqrN/1/ http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

See https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements