Lorsque nous écrivons de longs articles, nous avons souvent besoin d’ajouter des notes de bas de pages – footnotes en anglais – pour donner une référence ou apporter un complément d’informations.
Il existe un moyen d’ajouter une note de bas de page en CSS, avec un effet popup.
Survolez le numéro qui s’affiche ici à pour voir la démo: ¹Voici un example de note de bas de page qui apparaît dans une popup, grâce à CSS :)
Une popup CSS pour vos notes de bas de page
Code HTML
Commençons par le code HTML. Nous avons besoin principalement d’un lien HTML et d’une balise span qui contiendra le contenu de notre footnote :
<p>Voici un premier paragraphe avec une note de bas de page. <a class="footnote">¹<span>Coucou, je suis la note de bas de page numéro 1</span></a>
</p>
<p>Voici un deuxième paragraphe avec une note de bas de page. <a class="footnote">¹<span>Coucou, je suis la note de bas de page numéro 2 :)</span></a>
</p>Code language: HTML, XML (xml)Code CSS
Et voici notre code CSS pour créer la popup et afficher le contenu de nos notes de bas de page à l’intérieur, au survol de la souris:
a.footnote {
text-decoration:none;
background-color: #FEF6BB;
padding-left: 2px;
padding-right: 2px;
margin-right: 2px;
transition: all 2s ease;
}
a.footnote span {
z-index: -1;
opacity: 0;
position: fixed;
left: 15px;
bottom: 20px;
margin-left: 0px;
margin-right: 18px;
padding:14px 20px;
border-radius:4px; box-shadow: 5px 5px 8px #CCC;
border:1px solid #DCA;
background-color: #FEF6BB;
transition: all 2s ease;
}
a.footnote:hover span {
z-index: 9;
opacity: 1;
transition: all 2s ease;
}Code language: CSS (css)Dès que la souris n’est plus au-dessus du numéro de la note de bas de page, cette dernière disparaît avec un effet de fondu.
Résultat
Voilà ce que le code nous donne:
Voici un premier paragraphe avec une note de bas de page. ¹Coucou, je suis la note de bas de page numéro 1
Voici un deuxième paragraphe avec une note de bas de page. ²Hello World, je suis la note de bas de page numéro 2 :)
Matt
Et voilà, c’est très simple, en CSS pur mais c’est efficace et ne prend pas de ressources externes (pas de JS) – cela peut toujours servir!
Vous avez un projet WordPress ou WooCommerce en tête? Transformez votre vision en réalité avec mon expertise reconnue.
