做内容和：仅在<labels>上工作，而不是<input />？</labels>

Question

我有一个标签和一个输入元素：

<label class="required" for="email">Email</label>
<input type="text" id="email" name="email">

我在标签上设置了.required类，用这样的CSS为它附加'*'：

required:after {
    content:" *";
}

但有些字段没有前面的标签，所以我想在输入元素之前附加'*'，无论它是否有标签。我尝试在.required元素上设置<input>类，但它不起作用。那么<label>上的内容技巧是否可行，但不是<input>？我能以某种方式使用<input>吗？

Answer 1

问题在于content属性中指定的值，与元素内容之前或之后的:before和:after伪元素apply相结合，而不是元素本身。

基本上，这会映射到<input type="text" id="email" name="email"> *</input>，这就是为什么你没有看到你期望的东西。

我不知道你的限制是什么或者你有多少肘腔，但语义上正确的方法是在输入元素之前/之后放置一个<span>*</span>。

Answer 2

FROM： Nombre

TO： Nombre *

你可以试试这个：

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

Answer 3

您可以将输入或textarea样式添加到包装器，然后覆盖默认的textarea或输入样式，不带边框和背景。然后，正如Filip所说，您可以将带有content属性的：after选择器添加到元素而不是

我正在使用此方法在SlideOnline中显示幻灯片播放器的计数器，其中幻灯片的数量应以“X / Total”格式显示，但X应该是可编辑的。您可以在此处查看实时示例：http://slideonline.com/presentation/93 - 请查看演示文稿播放器的右下角以查看带数字的计数器。

Answer 4

尝试使用ID而不是Class

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

<label id="required">Name</label>
<input type="text" placeholder="Enter Name">