ボックスのタイトルを下にもっていきたい。

画像

HTML、CSS | JavaScript10閲覧

ベストアンサー

0

ThanksImg質問者からのお礼コメント

お二方ありがとうございました。 2種類試してどちらもうまくいったのですが、今回はどのような変更かを挙げられ、またhtmlの変更がなかったyppさんをベストアンサーにさせていただきます。 sanさんのやり方もデザイン的にそんなことができるのか、と学ぶことができました。 両者ありがとうございました!

お礼日時:1/22 17:58

その他の回答(1件)

1

こんな感じで、どうでしょう。 --- HTML --- <div class="box27" data-text="ここにタイトル"> <p>ここに文章</p> </div> --- CSS --- div.box27 { padding: 20px; border: solid 1px #7fffd4; position: relative; } div.box27::after { content: attr(data-text); padding: 4px; color: #fff; background-color: #7fffd4; position: absolute; bottom: -33px; left: -1px; }

画像

1人がナイス!しています