How can I make a fieldset legend-style “background line” on heading text?

Question

I\'m attempting to style heading text similar to how your default legend text appears in fieldsets; that is to say, I\'d like a strikethrough-like line to come up to, but no

Answer 1

I came up with a quick, image-less solution that seems to work pretty well in IE 8+ and other browsers, whilst gracefully degrading in IE 6/7:

CSS 2.1 EXAMPLE

h1 { position: relative; text-align: center; }
h1:first-line { background-color: white; }
h1:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    height: 1px;
    top: 50%;
    background-color: black;
}

It does come with the following limitations, though:

• The text must match the overall background colour exactly, otherwise it will look weird.
• If you want any kind of padding on the text, you need to use non-breaking spaces at either side of the text (see demo).
• Heading text must always be on one line (works best if fixed width).

Here's a demo: http://jsfiddle.net/AndyE/3tFQJ/​