title: css content property using :after
body: <p>I have a problem, I have this input text fields in a html form, this are wrapped for this <code>div</code> css properties:</p>
  
  <p><code>.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }</code></p>
  
  <p>when I try to this</p>
  
  <pre><code>.field_required{ display: inline; color: red; } 
  .field_required:after{ content: "*" }
  </code></pre>
  
  <p>the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the <code>field_required</code> class? if not, what I have to change to the <code>.formRight240.</code></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="rowElem noborder"&gt;
      &lt;label&gt;Customer ID:&lt;/label&gt;
      &lt;div class="formRight240"&gt;
          &lt;span class="field_required"&gt;&lt;input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="fix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>