Best way to accomplish knocked-out rule in CSS - css

Question

Ive been handed a design that has a particular header with style the type knocking out a rule like:
------ Text Content ------
Ive done this a couple times over the years but i was never happy with my solution. Usually it involved using numerous elements. Since these are headers id like to keep the markup as lean as possible.
My first thought this time around was to use box collapsing to my advantage: http://jsfiddle.net/cEcCL/
However there a are few problems here:
This relies on setting the background of the span to something opaque in order to knockout the line. Problem is most of these will probably be in the upper portion of the page where the gradient background hasnt yet faded to its solid
Actually i wasnt aware of this till i made the fiddle - the text seems slightly off center, not sure why that is.
While it can probably be managed, Im worried about the robustness of the vertical offsets to center the line on the median of the text line-box.. What if i have long header that goes to 2 lines?
Does anyone have any other ideas?

Answer 1

Here's a very quick example that uses a single h2 and the before/after pseudo elements.
h2:before, h2:after {
content:' '; display:inline-block;
height:0; width:100px;
border-top:1px solid black;
vertical-align:middle;
margin:0 1em
}
Obviously, there are some drawbacks:
No IE6/7 support
As it stands, you have to explicitly declare a width for the lines (but you might be able to mess with this)
Doesn't handle multiple lines too well, but again, you might be able to edit the h2 styles to make this work a little better

Answer 2

While not a perfect solution (I feel your pain here, this is a tough one), sometimes you can use background-attachment:fixed to remedy the background issue using the <span> technique if you are using a background image:
Demo: http://jsfiddle.net/cEcCL/3/
<h2><span>Text Content</span></h2>
h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
background:url(background.gif) fixed;
}
h2 {
line-height: 10px;
font-size: 18px;
text-align: center;
padding: 5px 0;
}
h2:after{
content:" ";
float:left;
border-bottom: 1px solid #000;
width:100%;
height:10px;
margin-top:-15px;
}
Of course this only works if the parent element can have a fixed background image, and won't work with CSS3 gradient backgrounds. It's a limited-use idea, but I just thought I'd bring it to light.
It seems only <legend> tags have this behavior, and I know of no way to emulate that with CSS, and I don't think you don't want to start using <legends> for headings...