今回はCSSで「テキストの左右に横線をつける実装方法」について紹介します。
タイトルテキストの装飾などに使えます。
【CSS】テキストの左右に横線をつける実装方法【擬似要素】
完成形はこちら。
HTMLとCSSのコードを見ていきましょう。
HTML
HTMLコードはこちら。
<p class="text">テキスト</p>
textクラスを持ったpタグを用意しました。
CSS
CSSコードはこちら。
.text {
display: flex;
align-items: center;
justify-content: center;
}
.text:before,
.text:after {
border-top: 1px solid black;
content: "";
width: 20px;
}
.text:before {
margin-right: 10px;
}
.text:after {
margin-left: 10px;
}
◎1行目〜5行目
textをフレックスボックスを使って上下中央揃えにします。
そうすることで、横線が上下中央になります。
◎6行目〜11行目
beforeとafterを使って、左右に擬似要素で線を実装します。
線の幅と高さの数値はご自由に変更してください。
◎12行目〜14行目
beforeで作成した線の右側に10pxの余白を作ります。
◎15行目〜17行目
afterで作成した線の左側に10pxの余白を作ります。
まとめ
実際の制作の業務でも、CSSでテキストの左右に横線を実装する機会があると思います。
是非興味がある方は真似してコーディングしてみてください。
