解 説
擬似クラス:before と:afterを使うことでテキスト前後の水平線ラインを作っています。前だけ、後ろだけの水平線も可能です。
1まずはhtmlをこのように作成します
Hello
2後はcssをこのように設定して完了です
h2 {
overflow: hidden;
text-align: center;
}
h2 span {
display: inline-block;
padding: 0 0.5em;
position: relative;
}
h2 span:before,
h2 span:after {
border-top: 1px solid;
content: "";
position: absolute;
top: 50%;
width: 99em;
}
h2 span:before {
right: 100%;
}
h2 span:after {
left: 100%;
}
水平線は内側の span 要素の :before と :after 擬似要素を左右に配置して表現。これらに 99em など充分な幅を持たせ、はみ出した分は外側の h2 要素に指定した overflow: hidden により切り取ります。もちろん擬似要素の幅は 999% とか 9999px とかでもいいです。
見出しタグ内のテキストをspanタグで囲みます