テキストの左右に横線(ボーダー)を表示するCSSパーツ
コピペで使えるパーツのご紹介です。
今回はテキストの左右にボーダーを表示するパーツをご紹介します。
目次
実際のコード
<p class="ttl">テキストの横に線だよ</p>
.ttl {
& {
display: flex;
justify-content: center;
align-items: center;
width: 350px;
margin: 0 auto;
font-size: 20px;
}
&:before, &:after {
content: "";
display: block;
height: 3px;
background: #000;
flex-grow: 1;
}
&:after {
margin-right: 12px;
}
&:before {
margin-left: 12px;
}
}
なお、Sassを利用せずにCSSで作成する場合は以下のとおりです。
.ttl {
display: flex;
justify-content: center;
align-items: center;
width: 350px;
margin: 0 auto;
}
.ttl:before, .ttl:after {
content: "";
display: block;
height: 2px;
background: #000;
flex-grow: 1;
}
.ttl:before {
margin-right: 12px;
}
.ttl:after {
margin-left: 12px;
}
実装の結果
応用編:カスタマイズ
// afterだけに設定すれば、右側にのみボーダーが表示
.ttl {
& {
display: flex;
justify-content: center;
align-items: center;
width: 350px;
margin: 0 auto;
font-size: 20px;
}
&:after {
content: "";
display: block;
height: 3px;
background: #000;
flex-grow: 1;
margin-left: 12px;
}
}
応用編を実装した結果
最後に
疑似要素であるbefore
とafter
を使えばかんたんに実装できました。
他にもこれらを利用することで応用できますので、是非色々試してみてください。