Can this be accomplished with CSS? [duplicate] - html

Question

This question already has an answer here:
Create vertically centered horizontal line to fill width of title with padding in CSS
(1 answer)
Closed 9 years ago.
Can the line behind the text be accomplished with CSS only?

Answer 1

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

Answer 2

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.

Answer 3

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/

Answer 4

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

Answer 5

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/

Answer 6

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