black line left and right of text

Question

I would like to put a black line to the left and right side of a heading, so it looks like:

-------------------- Beautiful text ---------------------------

content bla bla blab content bla bla blab content bla
content bla bla blab content bla bla blab content bla
content bla bla blab content bla bla blab content bla
content bla bla blab content bla bla blab content bla

Hoping you know what I mean.

What's the best way to do this? I can achieve this by giving the h1 a negative top-position and a white background while setting the content's div with a black border on top. So the heading (with a white background) overlays my black border.

But I'm sure there's a nicer way than working with negative positioning.

When asking *"What's **the best** way to do X?"* always provide context and explain the issues with your current solution. — Wesley Murch, Mar 23 '14 at 19:22
See my answer below. http://jsfiddle.net/jYW4n/22/show/ The line is right in the vertical middle. — JohanVdR, Mar 23 '14 at 19:44

G-Cyrillus · Answer 1 · 2014-03-23T20:08:00.570

1

you can use pseudo element in absolute position and negative margin: Basic one line version:

http://codepen.io/gc-nomade/pen/FzjiD/

h1 {
  margin:0 1em;
  position:relative;/*here triggers overflow since no width is given */
  overflow:hidden;
  text-align:center;
}
h1:after , h1:before{
  content:'';
  margin-top:0.5em;
  height:0;
  border-top:groove 2px;
  width:100%;
  position:absolute;
  margin-right:-100%;/* reduce size virtually to zero at 100% */
  margin-left:1%;/* set margin from end  text */
}
h1:before{
  margin-left:-101%;/* reduce size virtually to zero at 100% + give margin from begin text */
}

For multilines lines :

http://codepen.io/gc-nomade/pen/uLynl/ you need to set top coordonates to keep in vertical middle; and wrap text into inline-box to not overlay it . http://codepen.io/gc-nomade/pen/qhEro/

edited Mar 23 '14 at 20:08

answered Mar 23 '14 at 19:28

G-Cyrillus

101,410
14
105
129

Works great as well. See my fork: http://codepen.io/anon/pen/GvHaF You can put it vertically centred by using top:50%; + margin-top: -[borderwidth]px – JohanVdR Mar 23 '14 at 19:53
Only one problem what happens with mutlt-line headings it will break. – JohanVdR Mar 23 '14 at 19:56
@JohanVandenRym answer updated , see the 2 forks of initial pen and undesrtand how this works – G-Cyrillus Mar 23 '14 at 20:09
It should work also without adding
to the text like here: http://jsfiddle.net/37KQS/4/show – JohanVdR Mar 23 '14 at 20:16
? then obviuously you need to set a width or a max-width to span or at least some horizontal padding to h1 to reduce width avalaible for text being layed – G-Cyrillus Mar 23 '14 at 20:20
That will be the case when the heading is in a columnar lay-out you can have the heading span multiple lines. – JohanVdR Mar 23 '14 at 20:22
your fiddle shows the line all the way through when you resize window height, is that meant to be ? (i can provide a screen shot if you are curious) http://i.stack.imgur.com/B9Nml.jpg – G-Cyrillus Mar 23 '14 at 20:26
http://i.stack.imgur.com/B9Nml.jpg resize your frame on height in fiddle :) http://jsfiddle.net/37KQS/4/ the cure is display:inline-block on span http://jsfiddle.net/37KQS/5/ – G-Cyrillus Mar 23 '14 at 20:30
What browser do you see this it works fine since the span centred in the middle has a white background that cover the horizontal line. Very weird. – JohanVdR Mar 23 '14 at 20:32
use another color to show background of span to understand what i talk about , browsers uses different font-size, font family and line-height if not set :) – G-Cyrillus Mar 23 '14 at 20:33
I see it now on Chrome. – JohanVdR Mar 23 '14 at 20:36
inline-block does add white-space – JohanVdR Mar 23 '14 at 20:39
yep :) , beside , i would have build it so http://jsfiddle.net/37KQS/6/ , to avoid line to diseaper behind background if h1 as any http://jsfiddle.net/37KQS/10/ – G-Cyrillus Mar 23 '14 at 20:40
Fixed white-space issue http://fiddle.jshell.net/MF4WP/3/show/ – JohanVdR Mar 23 '14 at 20:44
thx, for the z-index:-1; thing , there's a fix to bring pseudo line back in view http://jsfiddle.net/37KQS/11/ opacity has this funny effect and way to fix it ;) works better in every browser , if span has layout http://jsfiddle.net/37KQS/13/ – G-Cyrillus Mar 23 '14 at 20:46
Your technique with my span: http://codepen.io/anon/pen/syJgt – JohanVdR Mar 23 '14 at 21:29
heu , you do not to reset font-size if span is inline-block ?http://codepen.io/gc-nomade/pen/gucto else , one here wich is alive http://codepen.io/gc-nomade/pen/Djhkd i'll be off next hours :) – G-Cyrillus Mar 23 '14 at 21:39

score 0 · Answer 2 · answered Mar 23 '14 at 19:26

I'm not sure if this is the best way, but its surely a simple way to achieve this:

HTML Code:

<hr class="headingrule" /><span id="heading">text</span><hr class="headingrule" />

CSS code:

.headingrule {
    float: left;
    width: 40%;
}

#heading {
    float: left;
}

JSFiddle.

JohanVdR · Accepted Answer · 2014-03-23T21:14:23.910

http://fiddle.jshell.net/MF4WP/4/
http://fiddle.jshell.net/MF4WP/4/show

<h1><span>My heading has a line through it.</span></h1>

The extra span is needed. Works also with multi-line headings:
See example here:
http://fiddle.jshell.net/aZ4tr/6/show
http://fiddle.jshell.net/aZ4tr/6/

 h1 {
    color: gray;
    font-size: 0; /* fixes white-space issue SPAN */
    font-family:Helvetica;
    text-align: center;
    display: block;
    padding: 0 10px;
    position: relative;
}
h1:before {
  content: '';
  height: 1px;
  width: 100%;
  background: gray;
  position:absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  margin-top: -1px;
}
h1 span {
    background: #fff;
    display: inline-block;
    font-size: 28px;  
}

black line left and right of text

3 Answers3