文字の横に横線を入れる方法

今回はテキストの両脇に横線を表示する方法を紹介します。
ちょっとしたテキストやタイトルの装飾に便利だと思うので、ぜひ使ってみてください。

html

<span>タイトル</span>

sass

span {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    &:before, &:after {
        content: '';
        display: inline-block;
        width: 50px;
        border: 1px solid #fff;
        vertical-align: middle;
    }
    &:before {margin-right: 10px;}
    &:after {margin-left: 10px;}
}

まとめ

ここでのポイントは

• 疑似要素にdisplay:inline-blockを指定すること
• 疑似要素にvertical-align: middleを指定すること