Question

是否可以在<label>内的文本字符串末尾添加星号？

这就是我所拥有的，但星号（当然）显示在整个标签后面：

<label class="xy-form-label-required" for="zipcode">
   Zip Code
   <span class="xy-form-labelinfo">
       Allowed characters a-z A-z 0-9 ,.-
       Could also be an information about the field...
   </span>
</label>

我的CSS代码：

form.xy-form .xy-form-label-required:after {
    color: grey;
    content: ' *';
}

结果如下：

邮政编码
允许的字符a-z A-z 0-9，.-
*

这是我想要在不改变html标记的情况下实现的目标。

邮政编码 *
允许的字符a-z A-z 0-9，.-

Answer 1

您只需添加以下CSS代码

即可

.xy-form-label-required > span.xy-form-labelinfo:before{
  color: grey;
  content: " *";
}

Answer 2

Typo除外，你想要之前的星号信息标签：

.xy-form-label-required .xy-form-labelinfo:before{ color: grey; content: ' *'; }

Answer 3

我不得不像这样更改标记，如果没有＆lt;而不能实现我想要的标记。选择器（尚不可用）：

<label class="xy-form-label" for="zipcode">
    <span class="mc-form-asterisk>Zip Code</span>
    <span class="xy-form-labelinfo">
        Allowed characters a-z A-z 0-9 ,.-
        Could also be an information about the field...
    </span>
</label>

我的CSS代码：

form.xy-form .xy-form-label .xy-form-asterisk:after,
form.xy-form .xy-form-label-required:after {
    display: inline-block;
    color: grey;
    content: '\a0*';
}

我认为还是那么糟糕。不过，谢谢你们的建议！

Answer 4

您在元素之后添加了asterix，而不是Text节点。要实现您想要的效果，您需要使用javascript，例如：http://jsbin.com/udiroz/2/edit 但我不会这样做。

不知道你的情况是否可行，但我建议将标记更改为：http://jsbin.com/udiroz/1/edit 在我看来，标签不适合其他信息，比如允许或不允许使用字符，验证错误等。

将Asterisk添加到<label> </label>的末尾

4 个答案: