MENU

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

このように、テキストの下にマーカーが引いてあるような表示を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. -
TOPへ Top