什么是一个好的办法来克服这个不幸的事实，这个代码将无法按预期工作：
<div class="required"> <label>Name:</label> <input type="text"> </div> <style> .required input:after { content:"*"; } </style>
在一个完美的世界中，所有需要的输入都会得到一个小星号，表示该字段是必需的。这个解决方案不可能，因为CSS被插入在元素内容之后，而不是在元素本身之后，但是类似的东西将是理想的。在具有上千个必填字段的网站上，我可以将输入前面的星号移动一行(：后：：之前)，或者将其移动到标签的末尾(.required label：after)或在标签前面，或在容纳盒上的位置等…
这是重要的，不只是在我改变我的想法，在哪里放置星号无处不在，而且对于奇怪的情况下，表单布局不允许在标准位置的星号。它也适用于检查表单或突出显示未正确完成的控件的验证。
解决方法
可以通过使用星号的图片的背景图像并设置标签/输入/外部div的背景和星号图像的大小的填充来实现类似的结果。
这样的东西：
这样的东西：
.required input { padding-right: 25px; background-image: url(...); background-position: right top; }
这将把星号INSIDE在文本框中，但把相同的div.required而不是.required输入可能会更多的你正在寻找，如果一点不太优雅。
此方法不需要额外的输入。
我不断得到这个帖子的奇数upvote。这个答案是OP的权利，但在大多数情况下可能不会是最好的选择。 The :after styntax is much better。
