1

There are many questions (and answers) about how to create a heading with centered text and a horizontal line either side, but what I'd like to achieve is slightly different.

I'd like to add vertical lines to the left and right end of the lines:

example heading

I have got close to what I'd like using this code:

body {
  padding: 50px;
}

div.outer {
  width: 100%;
  height: 15px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
  margin: auto;
  position: relative;
}

div.outer>span {
  font-size: 16px;
  background-color: #FFF;
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}
<div class="outer">
  <span>A Heading</span>
</div>

pen

Can anyone please point me in the right direction?

UPDATE

Thank you @nvioli for pointing me in the right direction. I ended up using a combination of your answer and flex based on this post

Here’s what worked for me: pen

datahandler
  • 91
  • 6
  • The dupe shows the basic technique, for the ends use the other pseudo: http://jsfiddle.net/yv9dxqo4/ – Asons Apr 25 '19 at 16:46
  • OP has already solved the problem in the linked question. Your comment shows that a further solution is necessary to build the vertical lines, which is what the question is about. Voting to reopen. – nvioli Apr 25 '19 at 17:55

1 Answers1

0

I would suggest adding another div outside what you have there. You've done a nice job making the horizontal line and centering the text (which is the hard part IMO), so wrapping the whole thing in a bigger div (twice as tall) and moving the inner div down half the height seems to work.

Note I've renamed your outer div to inner and added a new outer.

body {
  padding: 50px;
}

div.outer {
  border-right: 1px solid black;
  border-left: 1px solid black;
  height:30px;
}

div.inner {
  width: 100%; 
  height: 15px; 
  border-top: 1px solid black; 
  text-align: center;
  margin: auto;
  position: relative;
  top:15px;
}

div.inner > span {
  font-size: 16px; 
  background-color: #FFF; 
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}
<div class="outer">
  <div class="inner">
    <span>A Heading</span>
  </div>
</div>
nvioli
  • 4,137
  • 3
  • 22
  • 38