Search code examples
cssheaderlegendfieldset

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


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 not through, the text. I can't seem to find any information on how I might accomplish this, and since on numerous other questions Google's always directed me to Stack Overflow for answers, I thought someone here may be able to give me advice.

For greater clarity. I'm attempting to get this effect on header text:

                               Centered Header Text                               

Is there any way to do this?


Solution

  • See: http://jsfiddle.net/thirtydot/jm4VQ/

    If the text needs to wrap, this won't work. In IE7, there will be no line.

    HTML:

    <h2><span>Centered Header Text</span></h2>
    

    CSS:

    h2 {
        text-align: center;
        display: table;
        width: 100%;
    }
    h2 > span, h2:before, h2:after {
        display: table-cell;
    }
    h2:before, h2:after {
        background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
        width: 50%;
        content: ' ';
    }
    h2 > span {
        white-space: nowrap;
        padding: 0 9px;
    }