文字の横に水平線を表示するCSSテクニック【サンプルコードあり】

以下のように、文字の横に水平線を出すサンプルコード

まずはHTML

<h2><span>タイトル</span></h2>

続いて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や9999px など充分な幅を持たせ、はみ出した分は外側の h2 要素に指定した overflow: hidden により切り取ります。

以上、文字の横に水平線を描くCSSテクニックでした。