今回はポップな小技をメモ。テキストにラインマーカーを引いたような表現をする方法です。

このように、テキストの下にマーカーが引いてあるような表示を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要素の下に埋もれてしまい、表示されません。

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

おまけ:CSSだけでマウスホバー時にラインマーカーを引くアニメーションを付ける

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

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

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

アニメーション付きでのコード(※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. -

コメント

コメントする