Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 619
Meshaal Avatar asked May 12 '11 22:05

Meshaal


People also ask

How do I add a line to a header in CSS?

We will add a line before the heading through the ::before pseudo-element and then, specify the the color of the text. Put the content property, which is always used with the ::before and ::after pseudo-elements to generate content inside an element. Set the height and width of the line according to your text.

What is legend align in HTML?

The <legend> align attribute in HTML is used to specify the alignment of the caption in a <fieldset> element. The left and right alignment of <legend> element are supported by major browsers except Opera 12 and earlier versions. The bottom alignment are not supported by any browsers.


1 Answers

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;
}
like image 193
thirtydot Avatar answered Oct 22 '22 03:10

thirtydot