横並びの文字の下に 文字幅で、下線を引きたいです。

Question

実現したいこと

二つの単語文字を横並びにした横幅いっぱいの下線を引きたいです。
↓こんな感じ。
●●●●●　〇〇〇〇〇
ーーーーーーーーーーー

発生している問題・分からないこと

flexなどを使用すると、文字幅ではなく、ボックス幅になってしまい困っています。

●●●●●　〇〇〇〇〇
ーーーーーーーーーーー
こうしたいのにこうなっちゃう。↓

●●●●●　〇〇〇〇〇
ーーーーーーーーーーーーーーーーーーー

該当のソースコード

↓参考HTMLです。
<div class="line_name">
<div class="name_box">
<p class="en">tesuttesuto tesut</p>
<p class="jp">テストテストテスト</p>
</div>
<div class="sen"></div>
</div>


↓参考cssです。

.line_name .name_box {
color: #87764E;
display: flex;
gap: 3%;
align-items: baseline;
}

.sen {
width: 100%;
height: 1px;
background-color: #87764E;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

親要素にdisplay: inline-block;
とかフレックスとかいろいろしたけど、
下みたいになぜか改行しちゃう。
●●●●　〇〇〇〇
●　　　　〇
ーーーーーーーーー

white-space: nowrap;
flex-shrink: 0;
を指定しちゃうと、文字幅と線の長さがちがう。

補足

特になし

Comments

[CTRL-S]

HTMLもCSSもごちゃごちゃしてますが、単純にborder-bottomでラインを引くのじゃダメですか？

Answer 1

こうするとどうですか？

.line_name .name_box {
  color: #87764E;
  display: flex;
  gap: 3vw; /* ここ */
  align-items: baseline;
  width: fit-content;
  border-bottom: 1px solid red; /* ここ */

  p { /* ここ */
    flex: 0 0 max-content;
  }
 /* .sen はいらない */
}

Answer 2

2つの単語（英語と日本語）を横並びにして、そのちょうど下に「2つの単語の幅ぴったり」に下線（細い線）を引きたい、ということですね。

フレックスやwidth:100%だと、どうしても下線が「横幅いっぱい」や「ボックスの横幅」に伸びちゃって、
『文字そのものの下だけに線を引く』のがうまくできない、というお悩みです。

---

なぜ思い通りにならないの？

1. flexやwidth:100%は「親要素の幅」基準

CSSのflexや、.sen { width:100%; }は、
「その親(外枠)の幅いっぱい」にしようという指定です。

でも「2つの単語の幅」は、左側や右側に余白がある場合、「親の幅」とは合いません。
だから線も親要素の幅いっぱいに伸びてしまいます。

2. 文字（子要素）自身の「幅」に合わせる必要がある

あなたがやりたいのは、
「2つの単語分だけの幅」に線を引きたいということです。
これには「その文字たちをまるごと包んだ要素」に線を引く必要があります。

---

どうやって実現するの？

方法１：border-bottomで「包んだ要素」に下線を引く

具体例

<div class="line_name">
  <div class="name_box_with_underline">
    <span class="en">tesuttesuto tesut</span>
    <span class="jp">テストテストテスト</span>
  </div>
</div>

.line_name {
  /* 親の装飾など */
}

.name_box_with_underline {
  display: inline-flex;   /* ←横並びにして、かつ幅は"中身の幅"だけ */
  gap: 1em;               /* ←2つの単語間のスペース */
  border-bottom: 1px solid #87764E;   /* ←下線を引く！ */
  padding-bottom: 2px;    /* 下線と文字がくっつきすぎないように少し余白 */
}

/* サンプル。不要であれば外してOK */
.en, .jp {
  color: #87764E;
  font-size: 1.2em;
}

ポイント解説

• .name_box_with_underlineに display: inline-flex を指定することで、中身（2つの単語）ぴったりの幅になります。
• その**下（border-bottom）**に線を引けば、「2つの単語分だけの下線」になります。
• .senなど別で線を引かず、包む要素のborder-bottomを使うのがコツです！

---

方法２：「after」疑似要素で線を書くパターン

「どうしても別要素で線を出したい」「アニメーションしたい」などは::afterを使う人もいますが、
入門には「border-bottom」で包む方法が一番分かりやすくておすすめです。

---

まとめ

• やりたいこと（2つの単語の幅だけ線を引きたい）には「文字を包んだ要素」にborder-bottomを使うのが簡単でおすすめです。
• その要素のdisplayはinline-flexやinline-blockにすると、横並び＆必要なだけの幅になります。
• 別で線のdivを作りwidth:100%とすると、親の幅いっぱいに伸びちゃうため、今回の目的には合いません。

---

練習してみよう！

1. 上記HTML・CSSを自分のファイルで書いて実験してみましょう。
2. いろんな「並びかた」「太さ」「色」も変えてみると勉強になります！

疑問があれば、また質問してくださいね。応援しています！