做内容和：下班后只在<labels>，而不是<input>？

Question

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

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

我设置的标签追加一个“*”将其与这样的CSS在.required类：

required:after { 
    content:" *"; 
} 

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

FROM：农布雷

TO：农布雷*

你可以试试这个：

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