よくある左右にボーダーつくやつ
上記のようによく左右にボーダーがつく見出しやデザインがあります。
これまで、positionとbefore、afterで配置していたのですが、、、
flexを使用して簡単に、そしてテキスト増減を考慮した左右ボーダー見出しが作成できます!
index.html
<h2 class="m-heading2-border">左右にボーダー</h2>
style.scss
.m-heading2-border{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
&:before{
content: "";
width: 100px;
height: 1px;
background: #000;
margin-right: 10px;
}
&:after{
content: "";
width: 100px;
height: 1px;
background: #000;
margin-left: 10px;
}
}
見出し本体にflexをかけ、横、縦位置を中央にalign-items: center;、justify-content: center;をかけます。
そして見出しのbefore、afterでボーダーを表現します。
そ、それだけでできます。。
こんな感じにテキストが多く入っても大丈夫ですし、
こんな感じにテキストに改行が入ってもいけます!
これですと、cssも簡単ですし楽ですね!
みなさんぜひ使用してみてください。