テキストの下にアンダーライン

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在、Airbnbの模写コーディングをしています。
その中で、テキストにアンダーラインを入れたいのですが、単なるアンダーラインではなく、テキストの真下ではなく少し間隔が空いていて、テキストよりも長いラインです。このようなラインを入れるにはどうしたらいいでしょうか？
教えて頂けると幸いです。

こちらのようにしたいです。](a8873ef45b0362f7c9fb3cb733e663be.png)

試したこと

試した事は、open-liにborder-bottomをcssで加えましたが、線が区切られずに一直線の線が３本できるだけでした。そのため、各open-liを囲むクラス（<div class="囲み"></div>×６）を作ってborder-bottomを加えようとしましたが、そうするとflex-boxで上記の写真のように並べたものが崩れてしまいます。
aタグをcssでinline-blockにしてみてborder-bottomをしてもテキストと同じ長さにしかならないので意味がありませんでした。
open-liにborder-bottomをcssで加えwidthで長さを変えてみたんですが、やはり一直線が３本できるだけでした。

これが３本線の実態です。

解決方法を教えて頂けると幸いです。

Comments

[azuapricot]

画像が表示されていないので理想像がわかりません。

Answer 1

模写コーディングでしたら分からないところや良い実装方法が知りたい時は、
Chromeデベロッパーツールを用いると実際のCSSコードを見ることがおすすめです。

あまり考えないですぐに見てしまうというのはよくないかもしれませんが、
質問サイトで質問するよりかは自己解決できるのでスピーディーにできます。

実際のコードを見てそれでもコードの意味が分からない時に質問サイトを利用するのが良いかと思いました。

ChromeデベロッパーツールでCSSをチェックする方法

Comments

[kosan]

適切なアドバイスをありがとうございます。
Chromeデベロッパーツールを用いると実際のCSSコードを見ることを自分自身でいけない事だと思い込んでいました。
これからは自分で調べてみて分からなければ、Chromeデベロッパーツールを用いて見てみて、それでも分からなければ質問するという形をとります。
的確なアドバイスをありがとございます。

Answer 2

border-bottom以外に下線を引く方法としては **疑似要素(after要素)**を使うのが一般的です

【CSS】擬似要素を用いて線を引く方法

疑似要素で下線を引く

【CSS】borderの長さを調整する方法3つ：文字に応じて可変など

Comments

[kosan]

適切なアドバイス大変ありがとうございました。
疑似要素のafterを使う事で思っていたとうりの線を引けました。
本当に感謝しております。