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

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