छद्म-तत्व दिखने के बाद?

Question

मैं फ़ॉर्म फील्ड जो एक टूलटिप खोलता है के अंत में एक सहायता लोगो जोड़ना चाहते हैं।

सब कुछ काम कर रहा है, लेकिन .helptip आइकन (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) पाठ के साथ छोड़ दिया (मर्ज किए गए) पर आ रहा है। मैं वास्तव में अवधि पाठ के दाईं ओर चाहता हूं, इसलिए मैंने किया .help-tip: के बाद। लेकिन फिर कुछ भी नहीं दिखाता है।

आप स्पॉट सकते हैं कि क्या गलत है?

<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

आप इस समय एक छद्म तत्व ज़रिये जुड़े हुए हैं नहीं है। .help-tip::after को यह स्थापित करने की कोशिश करो और .help-tip देने content: "" और 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"); 
}