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

Kind of late to the party, but this is my solution: https://jsfiddle.net/g43pt908/

Requires no images, and doesn't depend on a background color.

HTML

<div class="hr-text">
    <span>Some text</span>
</div>

CSS

.hr-text {
    border-top: 1px solid #999;
    text-align: center;
    background-color: inherit;
}

.hr-text span {
    display: inline-block;
    position: relative;
    height: 14px;
    top: -12px;
    font-size: 14px;
    font-style: italic;
    color: #666;
    background-color: inherit;
    padding: 0 10px;
}

Answer 2

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:

<h1>CSS 2.1 EXAMPLE</h1>

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/​

Answer 3

I'm not sure if this would suit your need...

h1:before, h1:after {
 content: " ------------- ";
}

Answer 4

This doesn't feel like a very good answer, but I'm posting it anyway.

See: http://jsfiddle.net/rFmQg/

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

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

I don't like it because:

• You have to use an image.
• This. (it only works if the backgrounds match)

Answer 5

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;
}

Answer 6

Here is what I am using on a client's site: http://jsfiddle.net/TPgE4/

Pros:

• No images needed - renders instantly
• Uses padding to control space on both sides of text
• Text can be center aligned, or left/right aligned — just add, e.g., margin-left: 8px or margin-right: 8px on h2 span style definition to make it look good

Cons:

• Requires use of additional tag such as <span>...</span> inside heading tag
• Text must fit on one line for good appearance
• Background color on <span> element must match surrounding background color, so if you have a non-solid background image, gradient or pattern it won't match perfectly