line-height:0 の使い道【文字の横に線を引く】

line-height:0 の用途

下画像のような「文字+横線」のデザインをCSSで表現する場合はどうするでしょうか?

これは:beforeや:afterなどの疑似要素を使えば問題なく作成できます。疑似要素を使うと細かく指定できますが記述量が多くなって面倒です。

//疑似要素はなにかと記述量が多い
.text:before,
.text:after {
  content: '';
  display: inline-block;
  width: 200px;
  height: 2px;
  margin: 0 30px;
  background-color: #fff;
  vertical-align: middle;
}

この「文字+横線」はline-height: 0とborder-bottomを使って表現することも可能です。

line-heightは行の高さを変更するCSSのプロパティです。line-height: 0を指定すると、行の高さが0になって背景色がなくなりますが文字はそのまま残ります。

一見意味がなさそうに見えますが、line-height: 0を使うと簡単に「文字+横線」のデザインを作成できます。

疑似要素を使う方法と比べて大きなメリットがあるわけではありませんが、こういう使い方もできるという紹介です。

line-height:0を使って文字の横に線を引く

<!-- HTML -->
<div class="wrap">
  <span class="text">HTML&CSS</span>
</div>

親要素の中にインライン要素を入れています。親要素に対してline-height:0とborder-bottomを指定します。

//CSS
.wrap {
  text-align: center;
  line-height: 0;
  border-bottom: 2px solid #555;
}
.text {
  background-color: #fff;
  padding: 20px;
}

実際の表示↓

line-heightを0にすることで文字と横線が重なります。文字に背景色と同じbackground-colorを指定することで横線と被った部分を隠しています。文字左右の隙間はpaddingで調整可能です。

行の高さ自体は0になるので、別途marginを指定しないと上下の行と被ります。

デベロッパツールで確認するとどうなっているかよく分かるので気になる人は見てみてください。

背景色依存にはなりますがこのような方法でも「文字+横線」をデザインできます。line-height:0の使い道の紹介でした。メニューの区切り等に活用してください。