Vertically center dots with CSS

Question

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.

Expected:

HTML

<label><a href="#">Like</a></label>
<label><a href="#">Comment</a></label>
<label><a href="#">Share</a></label>
<label><span>1 hour ago</span></label>​

CSS

a{ 
    vertical-align: middle;
}

label:not(:last-child):after{
    content: " . ";
}

Not working example: http://jsfiddle.net/4ZFMm/

Thanks!

Answer 1

Somehow these got screwed up on the live server, although they worked locally, here's what worked for me, maybe it'll help someone else:

.element:before {
    content: "\2022";
}

Answer 2

Use · · for a dot or • • for a thicker, bulleted list style dot.

For use in the content attribute, you'll need to escape it:

middot:

content: " \B7 ";

bull:

content: " \2219 ";

Refrences:

• Adding HTML entities using CSS content
• 24.2.1 The list of characters - Character entity references in HTML 4