プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2017.7.8更新

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

Attention!

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

1まずはhtmlをこのように作成します
<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 とかでもいいです。

トップへ