1

http://i.imgur.com/CQpv1Wm.jpg

Can the line behind the text be accomplished with CSS only?

dsgriffin
  • 66,495
  • 17
  • 137
  • 137
talena6
  • 307
  • 4
  • 17
  • possible duplicate of [Create vertically centered horizontal line to fill width of title with padding in CSS](http://stackoverflow.com/questions/15654967/create-vertically-centered-horizontal-line-to-fill-width-of-title-with-padding-i) and also duplicate of http://stackoverflow.com/questions/5985009/how-can-i-make-a-fieldset-legend-style-background-line-on-heading-text – dsgriffin May 28 '13 at 20:33
  • Probably with css :before and :after selectors, and a bit of creativity. – Noctua May 28 '13 at 20:33
  • no images whatsoever, or css with background images? – Stacey Garrison May 28 '13 at 20:36
  • None of the solutions in the other issue would work for me. I have a double line (light grey/white), so I may have to use a png. – talena6 May 28 '13 at 20:41
  • there really isn't any need for a png here; a simple CSS border will do the trick. See my answer. – Spudley May 28 '13 at 20:49
  • That doesn't look like a double line, it looks like an inset or outset border. All of the solutions in the questions Zenith linked are poor (either require multiple elements or a background image). – cimmanon May 28 '13 at 21:10

6 Answers6

5

Yes.

HTML:

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

CSS:

body {
    background: #ccc;
}

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

JSFiddle

Source

Community
  • 1
  • 1
MikeB
  • 2,402
  • 1
  • 15
  • 24
4

Yes it can.

No images, no tables, just two elements and simple CSS.

Here's a fiddle to demonstrate it: http://jsfiddle.net/URrdP/

HTML:

<div> <span>Text Here</span> </div>

CSS:

div {
    font-size: 45px;
    border: #EEEEEE inset 2px;
    position: relative;
    text-align:center;
    height: 0px;
}
span {
    position: relative;
    top:-0.7em;
    background: #CCCCCC;
}

The key points here are that the outer element has an inset border and zero height and the inner element is positioned half a line upward so it sits on top of the outer element's border.

The other key point is that the inner element has a solid background color, otherwise the border line would show through. This means the technique will only really work successfully when you are placing it on top of a solid background; putting it on top of a gradient or an image may not work so well.

I may not have got the colors or the font sizing perfect for you in my example, but the principle should work perfectly fine for you.

CSS border inset may not be the best way to get a perfect colour match for you; if you need more fine-grained control of the colours you can specify individual colours for border-top and border-bottom.

Spudley
  • 166,037
  • 39
  • 233
  • 307
1

Here's how you could do something similar with no images.

HTML:

<h1><span>Text Here</span></h1>

CSS:

body, span { background: #ccc; }

h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }

JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/

ChrisLTD
  • 433
  • 1
  • 4
  • 13
1

Without images version (I'd prefer the display:table version though)

CSS:

body
{background:silver;}

h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}

h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}

h1::after
{margin-top:-1px;border-color:gray}

h1 > span
{background:silver;position:relative;z-index:1;}

HTML:

<h1>
  <span>
    Text Here<br>
    On Multiple Lines too
  </span>
</h1>

Demo: http://jsbin.com/uqexar/1/edit

0

Since there was no HTML specification, I added in a couple of spans

<h1>
  <span class="wrapper">
    <span class="text">TEXT HERE</span>
    <span class="line"></span>
  </span>
</h1>

CSS:

h1 {
    width:300px;
    background:#dcdcdc;
    padding:10px;
    text-align:center;
    color:#333;
}
.wrapper {
    display:block;
    position:relative;
}
.line {
    display:block;
    height:1px;
    background:#cecece;
    border-bottom:1px solid #e3e3e3;
    width:100%;
    position:absolute;
    top:50%;
    z-index:100;
}
.text {
    z-index:200;
    position:relative;
    padding:10px;
    background:#dcdcdc;
    display:inline-block;
}

This means the line will look like you specified with two greys.

http://jsfiddle.net/3q5he/

tedski
  • 2,271
  • 3
  • 27
  • 48
0

This can be done with a single element:

http://jsfiddle.net/Puigcerber/vLwDf/

<h1>Heading</h1>

h1 {
    overflow: hidden;
    text-align: center;
}
h1:before,
h1:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}

Origin: http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913

cimmanon
  • 67,211
  • 17
  • 165
  • 171