見出しなどで使いたい！CSSで水平線付きテキストを作る方法

このサイトはコーディング初心者〜中級者向けの情報サイトです。掲載コードの転用制限はありませんが、
動作保証は行なっておりません。ご意見については、フォームからお知らせください。

html.cssに関するTips

更新日：2017.7.8

html.css

解　説

擬似クラス:before と:afterを使うことでテキスト前後の水平線ラインを作っています。前だけ、後ろだけの水平線も可能です。

1まずはhtmlをこのように作成します

1	`<h2><span>Hello</span></h2>`

見出しタグ内のテキストをspanタグで囲みます

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 とかでもいいです。