How to have dots as horizontal separator with inline text like in this screenshot?

Question

I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date. I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing? Screenshot below:

Accepted Answer

I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.

How to have dots as horizontal separator with inline text like in this screenshot?

Solution

Problem