title: Vertically center dots with CSS
body: <p>How can I make dots between links vertically centered with only CSS? It's possible but I can't figure out how to do it.</p>
  
  <p>Expected:</p>
  
  <p><img src="https://i.stack.imgur.com/769q6.png" alt="Facebook inline list: Unlike, Comment, Share, 1413, 70, 76, about a minute ago"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;label&gt;&lt;a href="#"&gt;Like&lt;/a&gt;&lt;/label&gt;
  &lt;label&gt;&lt;a href="#"&gt;Comment&lt;/a&gt;&lt;/label&gt;
  &lt;label&gt;&lt;a href="#"&gt;Share&lt;/a&gt;&lt;/label&gt;
  &lt;label&gt;&lt;span&gt;1 hour ago&lt;/span&gt;&lt;/label&gt;​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>a{ 
      vertical-align: middle;
  }
  
  label:not(:last-child):after{
      content: " . ";
  }
  </code></pre>
  
  <p>Not working example: <a href="http://jsfiddle.net/4ZFMm/" rel="noreferrer">http://jsfiddle.net/4ZFMm/</a></p>
  
  <p>Thanks!</p>