Commande ":target" dans Chrome, Opera et Safari

Bonjour à toutes et à tous.

Mes pages Web comportent du texte avec des notes groupées en bas de page. Le but de la manœuvre est de cliquer sur les appels de notes disséminés dans le texte, puis, une fois la note lue, de cliquer sur un bouton "retour" qui ramène à l'endroit du texte qu'on a interrompu.

Dans le texte, les codes d'appel de note sont ainsi rédigé :

<span id="retour1"></span><a href="#note1">(1)</a>

Les notes sont rédigées de la façon suivante, de manière à revenir au texte :

<span id="note1"></span>TEXTE DE LA NOTE<a href="#retour1">RETOUR</a>

Jusque-là, pas de souci.

Pour des raisons esthétiques, j'ai mis en haut de mes pages une barre de 23 px d'épaisseur. Afin que la première ligne des notes et la ligne du texte qui contient l'appel de note ne soient pas cachées par la barre, j'ai indiqué dans la page CSS :

:target {
padding-top: 25px;
margin-top: -25px;
}

L'astuce fonctionne parfaitement avec Firefox, IE et Edge. Mais pas avec Chrome, Safari ni Opera, qui ne semblent pas prendre en compte correctement la commande ":target", car systématiquement, la première ligne de texte ou de note est masquée par la barre. Toutefois, ils n'ignorent pas complètement ce ":target", puisque - curieusement - cela fonctionne si je ne ferme pas les balises. Ainsi ces navigateurs vont afficher correctement les notes ou le texte sous la barre de haut de page comme je le souhaite si j'écris seulement <span id="note1"> et <span id="retour1"> sans compléter par les balises </span>. Mais ce n'est pas une solution, d'autant qu'à la longue, cela semble faire planter les navigateurs.

Il manque sans doute quelque chose dans le CSS, mais là, je sèche. Un grand merci donc à ceux et celles qui auraient une solution, ou même un début de solution, ou simplement d'explication.

Cordialement.