左右中央揃えにして、mouse hoverのボーダーボトムを設定したい

「アカウントを削除」の文字を左右中央揃えにするためにdisplay:flexで以下のように記述しました。

HTML
1<div class="delete_account_wrapper">
2        <p class="delete_account"  "アカウントを削除する" </p>
3      </div>

css
1.delete_account_wrapper {
2  display: flex;
3  justify-content: center;
4  text-align: center;
5 }
6
7.delete_account_wrapper:hover{
8  border-bottom: 1px solid rgb(62,62,62);
9}

するとボーダーボトムの線の長さが要素の幅いっぱいとなり期待している表示にならなかったのでwidthを150pxと.delete_account_wrapperに指定すると左揃えになってしまいました。

色々と調べた上でdisplay: inline-blockにすると中央揃えにはなりましたが、またマウスホバー下時の下線が要素の幅いっぱいとなってしまいます。

この場合、マウスホバーした時に、文字の幅のみの下線が表示され尚且つ「アカウントを削除する」という文字は左右中央にするにはどのようにするのが適切なのでしょうか。

どうぞよろしくお願い致します。

yambejp

2020/09/01 01:04 編集

pタグ開始側が閉じてないです

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

回答2件

またマウスホバー下時の下線が要素の幅いっぱいとなってしまいます。

それはマウスホバーの指定がdiv.delete_account_wrapperになっているからです。
ですのでマウスホバーの指定をテキストを囲っているp.delete_accountにすれば下線は文字サイズに調整されます。

html
1<div class="delete_account_wrapper">
2  <p class="delete_account">アカウントを削除する </p>
3</div>

css
1.delete_account_wrapper {
2  text-align:center;
3 }
4.delete_account {
5  display:inline-block;
6}
7.delete_account:hover{
8  border-bottom: 1px solid rgb(62,62,62);
9}

投稿2020/09/01 01:14

nelpesica

総合スコア159

ベストアンサー

CSS
1<style>
2.delete_account_wrapper:hover span{
3  border-bottom: 1px solid rgb(62,62,62);
4}
5</style>
6<p class="delete_account"><span>アカウントを削除する</span></p>