【CSS】文字の左右に線を引く

See the Pen OQBwvy by baetdjam (@beatdjam) on CodePen.

説明

• 文字の要素をFlexboxにして、align-items で垂直方向を中央ぞろえする。
• 疑似要素 :before、:afterで、文字の前後に空の要素(content:"")を追加する

解説

flex-grow:1を設定することで、要素内いっぱいに伸縮してくれる。
高さ1pxで背景色#000の要素を天地中央揃えで配置することで、線のように見せている

<style>
    .sample {
        display: flex;
        align-items: center;
    }
    .sample:before, .sample:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }
</style>
<p class="sample">Sample</p>