Objectif Frontend. Comment créer des bordures animées autour d'un lien

Dans ce cours en ligne, je vous propose d'apprendre à animer les bordures de vos liens grâce à la magie du CSS.
Nous allons mettre en place par défaut, des bordures de 10px de large en haut à gauche et en bas à droite de chaque lien.
L'idée sera que lorsque le pointer de la souris vient sur le lien, alors les bordures se referment de manière harmonieuse tout autour du lien.
L'objet ici étant d'augmenter l'expérience utilisateur en lui proposant les liens agréables à l'œil.

Pour ce faire nous allons devoir mobiliser un certain nombre de connaissances en langage CSS.
En cas de besoin, vous pouvez réviser ses connaissances en vous rendant sur les tutos suivants:

• Les différents types de positionnement en CSS
• CSS Avancé : Comprendre les pseudos éléments

Ce tutoriel fait partie de ma collection de tuto nommée "Collection frontend".
Je mets les codes de ce tuto à votre disposition.