隙間があいた4本線の見出しのつくり方

こんにちは。
今日はとある見出しのつくり方について書きます！

デザインはこんな感じです↓

よく見ると、四角に少し隙間があいていますよね＾＾
こんなデザインもCSSで実装できるので見ていきましょ〜！

あくまで私の書き方なのでもっと効率の良い作り方があるかもしれません・・・！

コード

HTML編

<h2 class="sectTit"><span>見出し見出し</span></h2>

CSS編

.sectTit {
  line-height: 1.3;
  text-align: center;
  font-size: 24px;
}

.sectTit span {
  position: relative;
  display: inline-block;
  min-width: 300px; //見出しが複数あって全て同じ幅のばあい指定
  box-sizing: border-box;
  padding: .5em .9em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.sectTit span:before, 
.sectTit span:after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;//左右の線の幅
  height: 88%; //左右の線の高さ
  content: '';
  transform: translateY(-50%); //天地中央に
  background: #000;　//線の色
}

.sectTit span:before {
  left: -3px; //縦と横の線のあいだの幅
}

.sectTit span:after {
  right: -3px;　//縦と横の線のあいだの幅
}

少し長いですが、擬似要素を使って実装してみました！
上下の線は<span>でつくって、左右の線は<span>の擬似要素でつくりました。

初見ではこれどうやるんやろ？と身構えたのですが、いざ手を動かしてみると意外となんとかなるもので、案外簡単にできました＾＾

このデザインに関わらずこんな感じで装飾は<span>とその擬似要素を使って解決できることが多いです！

何かしら参考になれば幸いです。では今日はここまで〜〜