title: Vertically aligning CSS :before and :after content
body: <p>I am trying to centre the link with the image, but can't seem to move the content vertically in any way. </p>
  
  <pre><code>&lt;h4&gt;More Information&lt;/h4&gt;
  &lt;a href="#" class="pdf"&gt;File Name&lt;/a&gt;
  </code></pre>
  
  <p>The icon is 22 x 22px</p>
  
  <pre><code>.pdf {
      font-size: 12px;
  }
  .pdf:before {
      padding:0 5px 0 0;
      content: url(../img/icon/pdf_small.png);
  }
  .pdf:after {
      content: " ( .pdf )";
      font-size: 10px;
  }
  .pdf:hover:after {
      color: #000;
  }
  </code></pre>