title: CSS: Circle with dynamic number in p tag
body: <p>I have a list of usernames:</p>
  
  <pre><code>&lt;p&gt;user 1&lt;/p&gt;
  &lt;p&gt;user 2&lt;/p&gt;
  &lt;p&gt;user 3&lt;/p&gt;
  </code></pre>
  
  <p>My goal is to display the number of recommendations a user has received in a small circle right next to the user name, with the same height as the text. </p>
  
  <p>I have set up a jsfiddle, but don't know how to achieve my goal:</p>
  
  <p><a href="http://jsfiddle.net/hAxJp/" rel="nofollow">http://jsfiddle.net/hAxJp/</a></p>
  
  <p>Does anyone have a suggestion?</p>