做内容和:只在<labels>上工作,而不是<input>？

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伪元素一起应用在元素内容之前或之后,而不是元素本身.

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

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