テキスト(見出し,タイトル)に横線をつける方法

2019年3月6日 HTML&CSS

HTMLのコーディングで必要になり,ちょっと調べたので備忘録.

見出しなどの文字列の両側(両端,左右)に横線(ハイフン)をつけて,中央にもっていきたい場合がある.
– を使うと —— のように切れ切れになってしまう.

すなわち,以下のようなデザイン.

見出し

そこで css を使って行う方法を紹介します.
HTML は

CSS は

ポイントは flex を使って,

ことです.

参考にさせていただいたサイト)
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
こちらは flex-grow で全体に線を引くようになっている.
ありがとうございます.

PageKnowHowBook
Pagetop