30

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:

Facebook inline list: Unlike, Comment, Share, 1413, 70, 76, about a minute ago

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!

Zaz
  • 46,476
  • 14
  • 84
  • 101
Luccas
  • 4,078
  • 6
  • 42
  • 72

2 Answers2

66

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:

Community
  • 1
  • 1
sachleen
  • 30,730
  • 8
  • 78
  • 73
  • nice answer, thanks. but still cant get the middot right in the middle http://jsfiddle.net/4ZFMm/1/ – Luccas Oct 25 '12 at 03:28
  • It is in the middle, the middle of the line. You want it slightly below middle. Padding/margin/lineheight won't work here... right click it on facebook and go to Inspect Element (Chrome), it'll give you the style for the element so you can see how they do it. I'm guessing you could do it with a bg image, too. – sachleen Oct 25 '12 at 03:32
  • Actually, upon closer inspection, it's at the same level as your screenshot for me. (Chrome, Win7) – sachleen Oct 25 '12 at 03:33
  • 1
    @Luccas, you fiddle displaces it. Just remove the `vertical-align` settings, and the middle dot will appear in its proper place, vertically at the middle of x-height. – Jukka K. Korpela Oct 25 '12 at 05:50
  • How to make the bullet bigger? – geckob Jan 18 '16 at 08:52
  • I prefer the [interpunct](https://en.wikipedia.org/wiki/Interpunct) `\22c5` – Zaz Jan 23 '17 at 22:31
  • I want to say something. Maybe someone had the same experience. I believe I used `•` in the past and in caused my computer to beep on the screen. I was trying so hard to figure out why my computer was beeping after an ajax call. When I finally got rid of the dot, it stopped beeping. Anybody have insight into that. – jack blank Feb 04 '19 at 03:53
4

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";
}
Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40