CSSで文字の打ち消し線を再現する

10月から続いた怒涛の年度末進行がやっと落ち着いたのでちょっと一息つけそうです。
よく考えてみると、半年以上も年度末なんですね。意味分かんない。

さて、最近マウスオーバーやカレントページで打ち消し線が引かれるナビゲーションをよく見かけます。

画像かHTMLタグかなと思ったらCSSで再現されていました。

擬似要素:beforeを使って

この再現には擬似要素が必要になってきます。

  1. 要素(ここでは文字)の前に:beforeで擬似要素を作り、そのトップにborderを指定します。
    ※擬似要素の作成のために、width、height、content、displayプロパティの指定は必須です。
  2. 擬似要素のボーダーをpositionで文字の上に絶対配置します。
  3. 打ち消し線つきの文字の完成です!

strikethrough
画像も使わないので、マルチデバイス対応もOKです。
よくアイコンや矢印を配置するのに擬似要素使いますが、こういう使い方もあるんですね。
擬似要素をマスターすれば、コーディングが楽ちんになること間違いなしです!