CSS technique for a horizontal line with words in the middle plus vertical borders

Question

I'm trying to move the entire border "up" so the bottom border lines up with the middle of the text. Very similar to this question, but I want to keep the left and right borders (they must be pushed up too). The reason for this is the text relates to the information above it.

https://jsfiddle.net/8c039kzy/

My jsfiddle is close but the left / right borders don't go high enough. So I want something like this:

|--------Info above is Important!--------|

(But the bottom of the left / right borders don't leak down past the horizontal border)

Answer 1

Use a :before pseudo element to draw the horizontal line instead.

h5 {
  width: 100%;
  text-align: center;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  margin: 10px 0 20px;
  position: relative;
}
h5:before, h5:after {
  content: '';
  position: absolute;
}
h5:before {
  top: 50%;
  background: #000;
  height: 1px;
  left: 0; right: 0;
}
h5:after {
  background: #fff;
  top: calc(50% + 1px);
  bottom: 0;
  left: -1px; right: -1px;
}
span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

<h5><span>Refer to Info above</span></h5>

Answer 2

I think you want this :

h5 {
  position: relative;
  text-align: center;
   border-left: 1px solid #000;
  border-right: 1px solid #000;
}

h5 span {
  background: white;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

h5:before {
  background: black;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 100%;
}

h5:before {
  left: 0;
}

<h5><span>Refer to Info above</span></h5>

I created a sides line and I used just right and left borders, is this that you want?

Answer 3

h5 span:before, h5 span:after {
  display:inline-block;
  content: "";
  vertical-align: bottom;
  height: .5em;
  border-top: 1px solid #000;
  width: 200px;
}

<h5><span>Refer to Info above</span></h5>

other way to do this :) but with lines of given width