css3.0 - 内容属性

Question

我写了一个CSS文件

.atleastTwoChars:after { 
    content: "2*"; 
    float: left; 
    width: 16px; 
    height: 14px; 
    border: 0; 
    margin: 2px 3px 0px 3px; 
    color: red; 
} 

我用这样的

<nobr> 
<input type="hidden" 
     name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objHidden" 
     id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objHidden" value="0"> 
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objTextBox" 
     type="text" 
     id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objTextBox" 
     class="xqh_LookUpTextBox_Edit"> 
<span id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory" 
     class="atleastTwoChars"> 
</span> 
</nobr> 

的JavaScript：

$('#ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory') 
    .removeClass("xqh_LookUpTextBox_ImgMandatory") 
    .addClass("atleastTwoChars"); 
$('img[id*="txt_sContactZipCode_imgMandatory"]').remove(); 

问题：内容（2 *）应该显示在文本框的末尾，但是它像这样在开始时显示。

Answer 1

从你的CSS删除float: right;：JS Fiddle demo。

顺便提及，根据W3，nobr：

[...是]完全废弃，并且不能由作者使用...

参考：

• Obsolete features, at the W3.org

Answer 2

The float: left;将使其显示在行的开头。也许你想用display: inline-block;代替。或者只是删除浮动，高度和宽度。