Souligner haut et bas un lien HTML grâce au CSS

Dans ce tuto, je vous propose de réaliser un petit effet sympa lorsque le pointeur de la souris survole un lien.
Que se passe-t-il habituellement ?
Par défaut, un lien HTML est souligné. Grâce au langage CSS, il est facile de modifier ce comportement par défaut et donc de retirer le soulignement d'un lien.
Il est tout aussi facile de redonner le soulignement à un lien lorsque le pointeur de la souris passe sur celui-ci.

Ce que je vous propose ici, c'est de souligner haut et de souligner bas un lien lorsque le pointeur de la souris passera sur ce lien.
Il sera même possible de personnaliser la couleur des soulignements haut et bas ainsi que la couleur des liens au moment du passage de la souris sur un lien.

Pour aller plus dans le CSS :
Utilisez la technologie Flexbox