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

♥ 0

いいねをした人: 居ません

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

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

いいねをした人: 居ません

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

♥ 2252
他の設定をしたときにもしかしたら干渉するかもですが、とりあえず現状では下記の 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

いいねをした人: 居ません
2022年12月16日 4:21 PM #115437

そすけ
閲覧者

♥ 9

キタジマ様

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

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

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

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

♥ 1

いいねをした人:
投稿者

投稿