Pseudoelement po nie wyświetleniu?

Question

Chcę dodać logo pomocy na końcu niektórych pól formularza, które otwiera etykietkę narzędzia.

Wszystko działa, ale ikona .helptip (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) pojawia się po lewej stronie (połączona) z tekstem. Właściwie to chcę na prawej stronie tekstu span, więc zrobiłem .help-tip: after. Ale w ogóle nic się nie pokazuje.

Czy możesz zauważyć, co jest nie tak?

<div class="advancedSearchFormSelectField fclear"> 
<span id="view_format_mis" class="advancedSearchFormlabel help-tip"> Include Columns in Result Set </span> 

<select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]"> 

<option value="x">X</option> 
<option value="y">Y</option> 
<option value="z">Z</option> 
</select> 
</div> 

<div class="advancedSearchFormSelectField fclear"> 
<span id="view_format_mis" class="advancedSearchFormlabel"> Sort Column </span> 
<!--No help tip here -->  
<select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]"> 

<option value="a">A</option> 
<option value="b">B</option> 
<option value="c">C</option> 
</select> 
</div> 

.help-tip { 
/* Merged text at the moment. .help-tip:after not working */ 
    cursor: pointer; 
    width: 10px; 
    height: 10px; 
    background-repeat: no-repeat; 
    background-image: url("/assets/small-help-icon.gif"); 
} 

.advancedSearchFormSelectField{ 
    width:300px; 
    margin: 5px; 
    height: 60px; 
    float:left; 
} 

Answer 1

Nie wydaje się być za pomocą pseudo-element w tej chwili. Spróbuj tego ustawienia .help-tip do .help-tip::after i dawanie jest content: "" i display: inline-block:

.help-tip::after { 
    content: ""; 
    display: inline-block; 
    cursor: pointer; 
    width: 10px; 
    height: 10px; 
    background-repeat: no-repeat; 
    background-image: url("/assets/small-help-icon.gif"); 
}