Pseudo-element after not showing? [duplicate]

Question

I want to add a help logo at the end of some form fields which opens a tooltip.

Everything is working, but the .helptip icon (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all.

Can you spot what's wrong?

<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

You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and 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"); }