title: Move up character displayed inline
body: <p>I have the following markup for breadcrumbs menu:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span class="start-here"&gt;You are here:&lt;span&gt;
      &lt;a href="/"&gt;example.com&lt;/a&gt;
      &lt;span class="raquo"&gt; › &lt;/span&gt; 
      &lt;a href="/news"&gt;News&lt;/a&gt;
      &lt;span class="raquo"&gt; › &lt;/span&gt; 
      Title
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a smart way to move those <code>›</code>  (<code>.raquo</code>) characters a few pixels up without absolute positioning when all of the elements are displayed inline? I want this character to be smaller than the others and to be displayed in the center of the line (or some pixels down/up).</p>
  
  <p>(I need it to work also for IE6 and up) </p>