ホバーした際、下線の長さを文字に合わせたい

♥ 0

Who liked: No user

このトピックには2件の返信、2人の参加者があり、最後にそすけにより2年、 10ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2022年12月16日 1:43 PM #115420

そすけ
閲覧者

♥ 9

【お使いの Snow Monkey のバージョン】バージョン: 18.1.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 17.1.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】
rakku-rakku.com

### 実現したいこと

ホバーした際、下線の長さを文字に合わせたい

### 発生している問題

ホバーした際、下線の長さを文字に合わせたいのだが、aタグ要素の長さになる。

### 試したこと

spanにcssを当ててみたが、下線が消えてしまいました。

spanにデフォルトで聞いている左右の余白が関連しているのでしょうか。

実現できそうでしたらアドバイスいただけますと幸いです。

宜しくお願いいたします。

♥ 0

Who liked: No user

2022年12月16日 3:17 PM #115435
キタジマタカシ
参加者

♥ 2619
他の設定をしたときにもしかしたら干渉するかもですが、とりあえず現状では下記の CSS に変更することで実現できると思います。

そのままだと span が広がってしまうので、a を flex にしてから、span に before を追加しています。
```
.p-global-nav .c-navbar__item > a {
    display: flex;
    flex-direction: column;
}

.p-global-nav .c-navbar__item > a span {
    position: relative;
}

.p-global-nav .c-navbar__item > a span:hover::after {
    width: 100%;
}

.p-global-nav .c-navbar__item > a span::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #79BD7F;
    transition: all 0.2s ease 0s;
}
```
♥ 0

Who liked: No user
2022年12月16日 4:21 PM #115437

そすけ
閲覧者

♥ 9

キタジマ様

お世話になっております。

ご回答ありがとうございます。

ご回答内容で無事設定できました。

ありがとうございました。

♥ 1

Who liked:
投稿者

投稿