タイトルの横に線をつけるスタイル

下記の画像のようにタイトル横に線を引くスタイル。

style.css

h1 {
    background: none;
    position: relative;
    text-align: center;
    width: 500px;
    margin: 0 auto;
}

h1::before {
    border-top: 2px solid #000;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

h1 span {
    background-color: white;
    display: inline-block;
    padding: 0 1em;
    position: relative;
}

index.html

<h1><span>タイトルテキスト</span></h1>

たまーに使うので、メモ。