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

2019年3月6日 HTML&CSS
このエントリーを Google ブックマーク に追加
LINEで送る

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

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

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

見出し

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

見出し

CSS は

.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}

ポイントは flex を使って,

ことです.

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

このエントリーを Google ブックマーク に追加
LINEで送る

PageKnowHowBook
Pagetop