Un fix pour le problème des ancres quand on a un menu fixe en haut de la page : l’élément ancré se retrouve bien en haut de la page, mais il est invisible parce qu’il est caché par le menu fixe.

Cette astuce résout le problème de manière invisible (pas de marges visibles).

Il s’agit d’appliquer un ::before sur le :target. La hauteur du ::before est égal (ou supérieur) à la hauteur du menu, et on lui met aussi un margin-top négatif égal à sa hauteur.

De cette façon, l’ancre s’applique sur le ::before, c’est donc lui qui est caché par le menu et le vrai élément ciblé (celui qu’on veut voir) est visible.

C’est très astucieux.

(merci à Aeris pour avoir déniché l’astuce !)

— (permalink)