Luccas Luccas - 2 days ago 5
CSS Question

Get inline dots with middle vertical align like in facebook but only with css

How can have dots between the links aligned vertically in the middle only with css? Its possible but I cant reach the way to do that.

Expected:

enter image description here

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

Use &middot; · for a dot or &bull; 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:

Comments