Html 在a<;的末尾添加星号;标签>;

Html 在a<;的末尾添加星号;标签>;,html,css,forms,Html,Css,Forms,是否可以在中的文本字符串末尾添加星号 这是我所拥有的,但星号(当然)显示在整个标签后面: <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 fiel

是否可以在
中的文本字符串末尾添加星号

这是我所拥有的,但星号(当然)显示在整个标签后面:

<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>

结果是:

邮政编码
允许的字符a-z a-z 0-9,-
*

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

邮政编码*

允许的字符a-z a-z 0-9,-

除了打字之外,您希望在信息标签前加上星号:

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

您只需添加以下CSS代码即可

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

您将在元素后添加asterix,而不是文本节点。为了达到您想要的效果,您需要使用javascript,例如: 但我不会走这条路

不知道在您的情况下是否可以这样做,但我建议将标记更改为以下内容:
在我看来,标签不是一个放置额外信息的好地方,比如允许哪些字符,或者不允许哪些字符,验证错误等等。

我不得不这样更改标记,如果没有选择器(目前还不可用),就不可能实现我想要的:


我想还没那么糟。不过,谢谢你们的建议,伙计们

CSS在被告知的
之后追加asterix
。您需要更改HTML标记或使用客户端语言(如jquery)附加它。您可以使用javascript实现这一点,除非您只希望使用css和HTMLW。避免更改HTML标记的原因是什么?我认为可以使用相对位置/负边距或类似的方式将星号移动到您想要的位置,但该解决方案并不灵活。那么,也许更改标记更好\我不想更改标记的主要原因是因为我想完全避免浮动。也许我应该添加一个额外的跨度,在本例中只添加星号。@FAngel在本例中,我实际上更改了标记,因为如果没有<选择器(我想这将很快引入),就不可能实现我想要的。它不会起作用。根据作者想要达到的效果,span在新的一行(显示:可能是block)和asterix后的文本中。在新生产线的跨度之前不需要。
.xy-form-label-required > span.xy-form-labelinfo:before{
  color: grey;
  content: " *";
}
<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>
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*';
}