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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

文字の左右に線を付ける

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

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;
}