文字に下線をいれたいです。

Question

前提・実現したいこと

h2で囲んでいる（class="title")「このテキスト」に文字と同じ長さの下線を入れたいです。
下線は、文字より10px余白を空けてつけたいのです。

html

		<div class="section-about_right">
			<div class="section-txt-list">
				<div class="section-txt">
				<div>
					<h2 class="title">このテキスト</h2>
				</div>
					<p>あああああああああああああああ</p>
				</div>
			</div>
			<img src="images/foodpht_eat.jpg" alt="あああああ">
		</div>

		<a href="#">ああああああああ</a>
	</section>

css

.title{
	display: inline-block;
	font-family: ryo-display-plusn, serif;
	font-size: 3.2rem;
	padding-bottom: 10px;
	border-bottom: solid 1.6px #444444;
	letter-spacing: 0.1em;
}
.section-txt-list{
	min-width: 400px;
	position: relative;

}
.section-txt{
	line-height: 2;
	padding-left: 16px;
	position: absolute;
	top: 50%;
	transform: translate3d(0,-50%,0);
}
.section-about_right{
	display: flex;
	justify-content: center;
}

試したこと

この内容だとブロックレベル要素のように文字周りに余白ができてしまい、下線とテキストの間の余白が離れすぎるのです。

ちなみに、画像と文字を横並びにするためにdisplay: flex;をつけています。これが関係しているのでしょうか…？

どうしたら、インライン要素のようになるのでしょうか。

Answer 1

親要素で line-height: 2; と設定しているので、行の高さがフォントの高さの２倍になっているからです。line-heightは子孫要素に継承します。

下記のように line-height: 1; を追加すれば下線は近づきます。
ただし、行高が変化した分レイアウトも変化しますので、そこは padding や margin で調整してください。

.title{
    display: inline-block;
    font-family: ryo-display-plusn, serif;
    font-size: 3.2rem;
    padding-bottom: 10px;
    border-bottom: solid 1.6px #444444;
    letter-spacing: 0.1em;
    line-height: 1;
}

別案として、border-bottom で下線を引くのではなく疑似要素で下線を引く方法もあります。
これだと、もう少し自由度が高いです。

Comments

[hanayammmm]

なるほど！うっかりでした…
ありがとうございます。

Answer 2

text-underline-offset プロパティで下線までの距離を指定できます。折り返しがあると線が重なってしまうので、line-height を大きくとったほうがいいかもしれません。

.title {
  text-decoration: underline 1.6px #444;
  text-underline-offset: 10px;
  line-height: calc(1.6em + 10px);
}

@supports not (text-underline-offset: 10px) {
  .title {
    width: max-content;
    white-space: nowrap;
    border-bottom: 1.6px solid #444;
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
Firefox/Safari

Chrome のような未対応ブラウザに対しては幅を指定すればいいでしょう。

Comments

[hanayammmm]

ありがとうございます。まだ学校で習ってない内容で、難しかったので他の方をベストアンサーに選びました。今度はこちらで挑戦してみようと思います！