どうもこんばんは。 初老のデザイナーたあです。 簡潔に書きます。 タイトルを挟む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> 以上でした。 なお余白の取り方
![タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/27f32df930d1be336f46b4ac37802b0a8943e5c0/height=288;version=1;width=512/https%3A%2F%2Ftiming-web.com%2Fwp-content%2Fuploads%2F2016%2F10%2F6fffa54b52814a6beaaba52b34d34004.png)