テキストの横に水平線を付ける

見出しなどのテキストの左右に水平線を画像を使わず、CSSのみで線の上に文字をのせたい時、
1 本の水平線を横幅全体に配置し、テキストに重なる部分を隠す方法があります。

h2 要素の外側に擬似要素で水平線を作った後、内側の span 要素に背景色を指定してテキスト部分を隠します。

■html

タイトル

■css
h3 {
position: relative;
text-align: center;
}
h3:before {
border-top: 1px solid;
content: “”;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
h3 span {
background-color: white;
display: inline-block;
padding: 0 0.5em;
}