将星号添加到 <label> 的末尾答案

【问题标题】：Add Asterisk to the end of a <label>将星号添加到 <label> 的末尾
【发布时间】：2013-01-16 21:55:18
【问题描述】：

是否可以在<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 ,.-

【问题讨论】：

CSS 将星号 after 附加到 <label></label> 被告知的位置。您要么需要更改 HTML 标记，要么使用 jquery 之类的客户端语言附加它。
你可以用 javascript 来实现，除非你只想要 css 和 html
避免更改 HTML 标记的原因是什么？我认为可以使用位置相对/负边距或类似的东西将星号移动到您想要的位置，但该解决方案并不灵活。那么，也许更改标记会更好？ \
我不想更改标记的主要原因是因为我想完全避免浮动。也许我应该只添加一个额外的跨度，在这种情况下只添加星号。
@FAngel 在这种情况下，我实际上更改了标记，因为如果没有

标签： html css forms

【解决方案1】：

您可以简单地添加以下 CSS 代码

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

【讨论】：

这行不通。根据作者想要达到的效果 span 是在文本之后的新行（可能显示：块）和星号。不在新行的 span 之前。

【解决方案2】：

除错别字外，您需要星号在信息标签之前：

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

【讨论】：

【解决方案3】：

我必须像这样更改标记，如果没有

<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*';
}

我认为仍然没有那么糟糕。不过，感谢您的建议！

【讨论】：

【解决方案4】：

您在元素后添加星号，而不是文本节点。要达到您想要的效果，您需要使用 javascript，即：http://jsbin.com/udiroz/2/edit 但我不会走这条路。

不知道在您的情况下这是否可行，但我建议将标记更改为：http://jsbin.com/udiroz/1/edit 在我看来，标签不是一个好地方，用于提供其他信息，例如允许或不允许使用哪些字符、验证错误等。

【讨论】：