Q&A
画像が表示されていないので理想像がわかりません。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
現在、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で長さを変えてみたんですが、やはり一直線が３本できるだけでした。
これが３本線の実態です。
解決方法を教えて頂けると幸いです。
回答2件
0
模写コーディングでしたら分からないところや良い実装方法が知りたい時は、
Chromeデベロッパーツールを用いると実際のCSSコードを見ることがおすすめです。
あまり考えないですぐに見てしまうというのはよくないかもしれませんが、
質問サイトで質問するよりかは自己解決できるのでスピーディーにできます。
実際のコードを見てそれでもコードの意味が分からない時に質問サイトを利用するのが良いかと思いました。
投稿2019/12/20 06:08
総合スコア356
適切なアドバイスをありがとうございます。
Chromeデベロッパーツールを用いると実際のCSSコードを見ることを自分自身でいけない事だと思い込んでいました。
これからは自分で調べてみて分からなければ、Chromeデベロッパーツールを用いて見てみて、それでも分からなければ質問するという形をとります。
的確なアドバイスをありがとございます。
0
ベストアンサー
border-bottom以外に下線を引く方法としては **疑似要素(after要素)**を使うのが一般的です
投稿2019/12/20 05:57
総合スコア2341
あなたの回答
tips
プレビュー
