ホバーで打消し線が伸びる

解説

テキストにマウスを乗せると、打消し線が左から右へすっと伸びるホバー演出です。::after 疑似要素で height:2px の線を作り、初期状態は width:0。:hover で width:100% に変化させ、transition と cubic-bezier のイージングで滑らかに伸ばしています。線は top:50% に置いて文字の中央を横切らせています。CSS のみで JS は使いません。

使いどころ

• タスクリストで完了を示すインタラクション
• 「もう古い手法」など否定・廃止のニュアンス演出
• 旧価格に線を引いて新価格を見せる比較表現

線の色は ::after の background で、伸びる速さは transition の .5s で調整します。注意点として、ホバーは指で触れるスマホでは発火しないため、タッチ環境ではタップやクラス付与で代替するとよいでしょう。また、動きを抑えたいユーザー向けに @media (prefers-reduced-motion: reduce) で transition を無効化しておくと配慮が行き届きます。意味として打消しを伝えるなら、見た目だけでなくテキストや属性でも状態が分かるようにすると親切です。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調