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

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

Answer 2

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"; }