ページ内リンク(アンカーリンク)で、見出しの少し上にリンクさせる小技

アンカーリンクを使って、ナビゲーションメニュー等でページ内スクロールさせること、あるかと思います。
その際にあるあるなのが、スクロールしたときに見出しが隠れること😅

今まではjsやjqueryでスクロール位置を調整していました。
1pしかないサイトの場合は問題ないのですが、複数ページあるサイトで他のページからページ内スクロールがあるページにhttp://○○#hoge等で遷移してきた際にはうまく調整できないという問題点がありました。

そんな時に簡単にできるのが、cssの:beforeを使って見えないところに空間を作る方法です。

ジャンプさせたい目的のブロック(IDを振っているブロック)にbeforeで見えない高さを設定します。
スマホ用に値を変更したいときは、media queryで変えればいいだけなので、簡単!IE11でも使えます。

めっちゃナイスな小技でした!

参考:【CSS】ページ内リンクのジャンプ先の位置を調整する