メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

今回はポップな小技をメモ。

このように、テキストの下にマーカーが引いてあるような表示をCSSで実装する方法です。

目次

    手順1:マーカーを引きたいテキストをspanタグで囲む

    まずは、CSSを適用させるために、マーカーを引きたい部分をspanタグで囲みます。このとき、好きなクラス名をつけてください。

    見本では、”marker_”というクラス名をつけました。

    手順2:擬似要素に背景色をつけて、テキスト下部に配置する

    ::beforeまたは::after擬似要素を使用し、以下のようなCSSを指定します。

    .marker_{
      position: relative;
      z-index: 1;
    }
    .marker_::after{
      content:"";
      width: 100%;
      height: 8px;
      background: #ffb580;
      position: absolute;
      bottom: -4px;
      left: 0;
      z-index: -1;
    }

    widthを100%にしてテキスト幅まで擬似要素を広げたら、positionをabsoluteにしてテキスト下部へと配置し、好きな色を指定します。最後にz−indexを調整してテキストの後ろにマーカーを回り込ませ、可読性をキープします。

    この時、親であるspanタグのz-indexを1以上の値にすることに注意してください。z-indexを指定しなければ、マーカーとなる擬似要素がbody要素の下に埋もれてしまい、表示されません。

    これで、テキストにマーカーを引いたような表現が実現できました。

    おまけ:マウスホバー時にマーカーを引くようにする

    先ほどまでは、静的な表現でしたが、マーカーの表示にアニメーションをつけてみます。

    マウスをホバーさせてみてください。

    このようなアニメーションを実装していきます。

    ソースは以下。

    ※SCSSでのソースとなります。

     

    .marker_hov_{
      position: relative;
      z-index: 1;
    
      &::after{
        content:"";
        width: 0%;    /*最初はwidth:0にする*/
        height: 8px;
        background: #ffb580;
        position: absolute;
        bottom: -4px;
        left: 0;
        z-index: -1;
        transition: all .3s;  /*アニメーションの長さ*/
      }
    		
      &:hover{
        &::after{
          width: 100%;    /*hover時に100%で広がる*/
        }
      }
    }
    

    変わったところは、hoverさせる前にwidthを0%にしておくことと、transitionを新たに指定しているところです。

    あとは:hover擬似クラスを利用してマウスホバー時にwidthを100%へと広げると、マーカーを引くようなアニメーションの完成です!

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top