title: Pseudo-element after not showing?
body: <p>I want to add a help logo at the end of some form fields which opens a tooltip.</p>
  
  <p>Everything is working, but the .helptip icon (<a href="http://img1.wsimg.com/shared/img/1/small-help-icon.gif" rel="noreferrer">http://img1.wsimg.com/shared/img/1/small-help-icon.gif</a>) 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.</p>
  
  <p>Can you spot what's wrong?</p>
  
  <pre><code>&lt;div class="advancedSearchFormSelectField fclear"&gt;
  &lt;span id="view_format_mis" class="advancedSearchFormlabel help-tip"&gt; Include Columns in Result Set &lt;/span&gt;
  
  &lt;select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]"&gt;
  
  &lt;option value="x"&gt;X&lt;/option&gt;
  &lt;option value="y"&gt;Y&lt;/option&gt;
  &lt;option value="z"&gt;Z&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="advancedSearchFormSelectField fclear"&gt;
  &lt;span id="view_format_mis" class="advancedSearchFormlabel"&gt; Sort Column &lt;/span&gt;
  &lt;!--No help tip here --&gt;    
  &lt;select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]"&gt;
  
  &lt;option value="a"&gt;A&lt;/option&gt;
  &lt;option value="b"&gt;B&lt;/option&gt;
  &lt;option value="c"&gt;C&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>