Is there any way to vertically align an image element generated by a "content" property as part of a ":before" selector, next to adjacent inline text? In other words, I have

<a href="..." class="facebook">Share on Facebook</a>

As I don't want to pollute my markup with unnecessary IMG elements that only have to do with style, I resort to adding a small icon to the left of the link, via CSS (except that it does not align properly, hence the question):

a.facebook:before
{
     content: url(/style/facebook-logo.png);
}

I tried adding a "vertical-align: middle" (one of the most notoriously difficult aligning concepts to grasp in CSS, in my opinion, is that very property) but it has no effect. The logo aligns with text baseline, and I don't want to hardcode pixel offsets, because frankly text size differs from browser to browser, etc. Is there any solution for this?

Thanks.