Vertically center dots with CSS
css, html, unicode
Solution
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
Problem
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!