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:

---

Answer 1

I had the same question once and I came up with this:

.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:''; 
display:table-cell; 
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}

I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.

DEMO: http://dabblet.com/gist/2172806

Answer 2

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.