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

是否可以在<label>内的文本字符串的末尾添加星号？将星号添加到<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标记。

邮编 *
允许的字符AZ，az或0-9，.-

来源

2013-01-11 mayrs

CSS会在被告知的情况下在'**'后面附加asterix **'''。你可能需要改变你的HTML标记或者使用客户端语言如jquery来附加它。 – Amyth

你可以用javascript实现这一点，除非你只想用CSS和HTML – Morpheus

避免更改HTML标记的原因是什么？我认为可以将星号移动到需要使用位置相对/负值边界或类似位置的地方，但该解决方案并不灵活。所以，也许改变标记更好？ \ –

我不得不改变的标记，像这样，这是不可能才达到我想要的东西没有<选择（这还不可用）：

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

我还是觉得还不错。尽管如此，感谢您的建议家伙！

来源

2013-01-16 13:55:18 mayrs

错字分开，你想要的星号前的信息标签：

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

来源

2013-01-11 13:09:16

，你可以简单地添加下面的CSS代码代替

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

来源

2013-01-11 13:10:09 Amyth

这不起作用。根据作者想要达到的效果跨越新行（大概显示：块）和文本后的星号。不在跨越新行之前。 – Zielun

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

不知道这是否可能在你的情况，但我会建议标记改变这样的事情：http://jsbin.com/udiroz/1/edit 在我看来标签是不是为了增加信息的好地方像字符是允许的，或者不验证错误等

来源

2013-01-11 13:53:58 Zielun

的确我必须改变标记。 – mayrs

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

回答

相关问题