css - CSS を使用してテキストを中央に配置し、端をキャップした水平線を作成するにはどうすればよいですか?

Question

テキストを中央に配置し、両側に水平線を配置した見出しを作成する方法については、多くの質問 (および回答) がありますが、私が達成したいことは少し異なります。

行の左端と右端に垂直線を追加したい:

このコードを使用して、私が望むものに近づきました:

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>

ペン

誰でも私を正しい方向に向けることができますか?

アップデート

正しい方向に向けてくれてありがとう@nvioli。この投稿に基づいて、あなたの答えとフレックスの組み合わせを使用することになりました

これが私のために働いたものです：ペン