CSS technique for a horizontal line with words in the middle

Question

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.

Answer 1

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {     width: 100%;      text-align: center;      border-bottom: 1px solid #000;      line-height: 0.1em;     margin: 10px 0 20px;   }     h2 span {       background:#fff;       padding:0 10px;   }

<h2><span>THIS IS A TEST</span></h2>  <p>this is some content other</p>

I tested in Chrome only, but there's no reason it shouldn't work in other browsers.

JSFiddle: http://jsfiddle.net/7jGHS/