タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた

どうもこんばんは。
初老のデザイナーたあです。

簡潔に書きます。
タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。

こういうやつですね

.title-border {
display: flex;
align-items: center;
}
.title-border:before,
.title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}

これを線を入れたいとこに入れるだけっす。
こんな感じで

<div class="title-border">これ</div>

以上でした。

なお余白の取り方はrem使ってるけど好きにすればいいと思うます。

Tweet

Share on Tumblr