See the Pen 左右に水平線を入れたスタイルのラベル by Yoshimune (@hachidaime) on CodePen.

上のCODEPENからコピーしてもらったらいいけれど、
コチラにも書いておきます。

CSS

.lines-on-sides{
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
}
.lines-on-sides:before {
  content: "";
  display: block;
  border-top: solid 1px #ccc;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.lines-on-sides span {
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 5;
}
.lines-on-sides.sides_left{
  text-align: left;
}
.lines-on-sides.sides_left span{
  padding-left: 0;
}
.lines-on-sides.sides_right{
  text-align: right;
}
.lines-on-sides.sides_right span{
  padding-right: 0;
}

HTML

<div class="lines-on-sides"><span>水平線の見出し</span></div>
<div class="lines-on-sides sides_left"><span>水平線の見出し</span></div>
<div class="lines-on-sides sides_right"><span>水平線の見出し</span></div>

よかったらどうぞ。
コチラを参考にしました。
[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック