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

Удалите float: right; из вашего CSS: Демонстрация JS Fiddle .

Кстати, согласно W3, nobr:

[...is] полностью устарел и не должен использоваться авторами ...

Ссылка:

• Устаревшие функции, на W3.org

Answer 2

float: left; будет отображаться в начале строки. Возможно, вы хотите использовать display: inline-block; вместо этого. Или просто удалите поплавок, высоту и ширину.