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

Question

有什么好方法可以克服不幸的事实，即该代码无法按预期运行：

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

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

在理想情况下，所有必填项input都将带有一个小星号，表明该字段是必需的。这种解决方案是不可能的，因为CSS插入在元素内容之后，而不是元素本身之后，但是很理想。在具有数千个必填字段的站点上，我可以将星号移动到输入的前面，而只更改一行（:after到:before），也可以将其移动到标签的末尾（.required label:after）或标签的前面，或收纳盒上的位置等…

这不仅很重要，不仅以防万一我改变主意，将星号放置在任何地方，而且对于表单布局不允许星号处于标准位置的奇怪情况也很重要。它也可以很好地与检查表单或突出显示未正确完成的控件的验证一起使用。

最后，它不会添加其他标记。

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

Answer 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">