前提・実現したいこと
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;をつけています。これが関係しているのでしょうか…?
どうしたら、インライン要素のようになるのでしょうか。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/12 11:31