Question

I have written a css file

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

I have used like this

<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();

problem: content (2*) should be displayed at the end of the text box but it is displaying at the start like this.

Answer 1

Remove the float: right; from your CSS: JS Fiddle demo.

Incidentally, according to W3, nobr:

[…is] entirely obsolete, and must not be used by authors…

Reference:

• Obsolete features, at the W3.org