I'm trying to make a horizontal rule with some text in the middle.
For example:
———————————– my title here —————————–
Is there a way to do that in CSS? Without all the "-" dashes obviously.
cross-browsercsshtml
I'm trying to make a horizontal rule with some text in the middle.
For example:
———————————– my title here —————————–
Is there a way to do that in CSS? Without all the "-" dashes obviously.
Best Answer
This is roughly how I'd do it: the line is created by setting a
border-bottom
on the containingh2
then giving theh2
a smallerline-height
. The text is then put in a nestedspan
with a non-transparent background.I tested in Chrome only, but there's no reason it shouldn't work in other browsers.
JSFiddle: http://jsfiddle.net/7jGHS/