CSSで、border-bottomの長さが、文字に応じて可変にならない。

HTML,CSSでサイト模写をしています。

文字をホバーした時、下線が表示されるようにしています。
そして、border-bottomの長さを文字と同じにしたいので、文字に、
display: inline-block;を付けたのですが、borderの長さが文字の長さを超えて、要素の長さになってしまいます。
原因は何でしょうか。

Bootstrap
VSCode
chrome

html
1  <div class="container">
2                  <div class="row">
3                  <div class="col-lg-3 ddd">
4                    <p class="fff">企業情報</p>
5                    <div class="row eee">
6                      <div class="col-sm-4 col-lg-12 hhh">Airbnbのご利用方法</div>
7                      <div class="col-sm-4 col-lg-12 hhh">ダイバーシティ＆ビロンギング</div>
8                      <div class="col-sm-4 col-lg-12 hhh">アクセシビリティ</div>
9                      <div class="col-sm-4 col-lg-12 hhh">信頼＆安全</div>
10                      <div class="col-sm-4 col-lg-12 hhh">Airbnb Citizen</div>
11                      <div class="col-sm-4 col-lg-12 hhh">オリンピック</div>
12                      <div class="col-sm-4 col-lg-12 hhh">ニュースルーム</div>
13                    </div>
14                  </div>

.hhh { display: inline-block; margin-bottom: 30px; border-bottom: solid 1px rgba(247, 238, 238, 0.4); }

.hhh:hover { transition: 0.4s; border-bottom: solid 1px rgba(0, 0, 0, 0.4); }

行動規範の内容に同意します

回答1件

ベストアンサー

col-sm-4やcol-lg-12で、横幅が指定されているからです。
(厳密にはflex-basisやmax-widthのようですが)

[1]か[2]のいずれかで対応可能と思われます。

[1] <div class="col-sm-4 col-lg-12">の子要素に<span class="hhh">を追加する

HTML
1<div class="container">
2  <div class="row">
3    <div class="col-lg-3 ddd">
4      <p class="fff">企業情報</p>
5      <div class="row eee">
6        <div class="col-sm-4 col-lg-12"><span class="hhh">Airbnbのご利用方法</span></div>
7        <div class="col-sm-4 col-lg-12"><span class="hhh">ダイバーシティ＆ビロンギング</span></div>
8        <div class="col-sm-4 col-lg-12"><span class="hhh">アクセシビリティ</span></div>
9        <div class="col-sm-4 col-lg-12"><span class="hhh">信頼＆安全</span></div>
10        <div class="col-sm-4 col-lg-12"><span class="hhh">Airbnb Citizen</span></div>
11        <div class="col-sm-4 col-lg-12"><span class="hhh">オリンピック</span></div>
12        <div class="col-sm-4 col-lg-12"><span class="hhh">ニュースルーム</span></div>
13      </div>
14    </div>
15  </div>
16</div>