【CSS】文字の左右に線を付ける方法

本記事では、CSSで文字の左右に線を付ける方法について解説しています。見出しなどに使うとおしゃれなページに仕上がります。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(1,654件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報

作成者	たにぐち まこと
学習時間	9時間
受講者数	43,706人
レビュー	(9,232件)

動画の詳細はこちら

文字の左右に線を付ける

完成形は以下のとおりです。

HTML

<p class="sample">サンプル</p>

左右に線を付けたいタグを用意します。今回はクラスsampleが付与されているpタグを用意しました。

CSS

/* ↓① */
.sample{
  display:flex;
  align-items: center;
  justify-content: center;
}

/* ↓② */
.sample::before,
.sample::after{
  content: "";
  flex-grow:1;
  border-top: 1px solid black;
}

/* ↓③ */
.sample:before {
  margin-right: 1rem; 
}
.sample:after {
  margin-left: 1rem; 
}

1. .sampleに適用している「display:flex」「align-items:center」「justify-content: center」は、上下左右を中央揃えします。
2. .sampleの擬似要素(::before,::after)で、線を作成します。flex-growで伸縮率を1対1にすることで、2つの線の長さを均等にします。
3. 文字とピッタリに線が入っているので余白を設けます。

線の長さを自分で決める

先ほど紹介したコードは線の長さが幅いっぱいでしたが、線の長さを自分で決めたい場合は線を表示している擬似要素に幅を指定し、flex-glowを削除します。

.sample::before,
.sample::after{
  content: "";
  width:100px;
  border-top: 1px solid black;
}