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

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にそすけにより1年、 11ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #115420
    そすけ
    閲覧者
    9

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

    ### 実現したいこと

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

    ### 発生している問題

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

    ### 試したこと

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

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

     

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

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

    0
    いいねをした人: 居ません
    #115435
    アバター画像キタジマ タカシ
    参加者
    2421

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

    そのままだと span が広がってしまうので、aflex にしてから、spanbefore を追加しています。

    .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
    いいねをした人: 居ません
    #115437
    そすけ
    閲覧者
    9

    キタジマ様

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

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

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

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

    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「ホバーした際、下線の長さを文字に合わせたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。