以下のように、マウスホバー時にテキストに光ペン風のマーカーを引くようなアニメーションを実装してみました。
See the Pen マウスホバー01 by yamaguchi (@ygi) on CodePen.
目次
マーカーを引きたい部分をspanタグで囲み、markerクラスをつけます。
CSSを適用させるために、マーカーを引きたい部分をspanタグで囲みます。.markerクラスをつけます。
蛍光ペン風のマーカーを擬似要素で表現する
height bottomでマーカーの高さや位置を調整しましょう。backgroundでマーカーの色を調整しましょう。z−indexプロパティをマイナス側へ調整しマーカーをテキストの後ろにします。
hoverさせる前widthプロパティを0%、:hover擬似クラスを利用してマウスホバー時に100％にすることで、マーカーが引かれるという仕組みになっています。transitionにマーカーを引く速度を指定する0.3sの箇所に、マーカーを引くまでの時間を指定してください。
応用編：マウスホバーすると文字が鮮明になり、太文字だけマーカーを引くアニメーション
透明度を指定したのでz−indexプロパティは削除しました、必要に応じてz−indexプロパティ使用してください。