How to have dots as horizontal separator with inline text like in this screenshot?
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?
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.