使用伪元素使用必需属性向输入元素添加星号

Question

我想在具有必需属性的输入元素中添加一个星号。 并在输入内部。

这就是我要做的。

<input type="text" placeholder="name" class="text-input" required>
[required] {
  position: relative;
  color: red;
  padding: 10px;
}
[required]:after {
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
  content: " *";
  height: 10px;
  width: 10px;  
}

演示

我不想添加更多元素或类，这可能吗？

---

看起来我不能这样做。

Answer 1

在实践中，你不能。CSS 2.1规范说："这个规范没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中更详细地定义。到目前为止，它还没有定义。input被视为替换元素。浏览器通常不支持:after，并在上面:before伪元素。如果他们这样做了，生成的内容将入元素内容的末尾或开头，根据 HTML 规范，元素内容是空的，因此根本不清楚会发生什么。

请注意，使用没有关联 label 元素的 input 元素会破坏基本的可用性和辅助功能准则。特别是，不能使用 placeholder 属性代替标签。

Answer 2

请注意，您不能在替换的元素（如表单元素（输入）和图像元素）上使用:before和:after伪元素。

您可能希望将输入包装在父元素中，并对此应用:after

Answer 3

这里有一个添加 asterix 的示例，但就在输入之后

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

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>
<style>
    .required:after { content:" *"; }
</style>​

不能对该;)的输入使用before和after

编辑 ： 像那样：

    <input type="text" placeholder="Name *">