[Résolu] Lien rendu invalide par une animation

Bonjour,

Pour habiller un lien hypertexte qui renvoie vers une autre page de mon site, j'ai voulu créer une petite animation autour. Sauf que l'animation semble être passer par dessus mon lien : quand on passe dessus, la petite main apparaît bien, mais on ne peut pas cliquer dessus, ou autrement dit, il ne se passe rien.

J'ai essayer z-index (sur les conseils de mon père) mais cela n'a rien donné. Auriez-vous des idées ?

Mon code HTML:

<div id="competence">
				<div class="texte">
					<h2>Mes comp&eacute;tences</h2>
					<div class="description"><p>Ici, d&eacute;couvrirez les comp&eacute;tences que j'ai acquises.</p>
						<div class="container3">
							<div><a href="mes_competences.html" class="hover_border3">Pour en apprendre plus</a></div>
							<div><img src="images/fleche.png" class="fleche"></div>
						</div>
					</div>
				</div>
			</div>

Mon CSS:

img
{
  height: 60px;
  width: 30px;
}

a
{
  color: white;
  text-decoration: none;
  z-index: 10;
}

.hover_border3
{
  display: flex;
}

.container3
{
  height: 80px;
  width: 230px;
  font-family: amikoregular;
  font-size: 1em; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 10px;
}

.container3:before
{
  content: "";
  position: absolute;
  top: 0; /*...Changer les chifres ici pour changer le point de départ...*/
  left: 50;/*............................Idem............................*/
  width: 0;/*...Changer ici pour modifier la taille de départ...*/
  height: 0;/*..........................Idem....................*/
  border: 3px solid transparent;
}

.container3:hover:before
{
  animation: animate 1s linear forwards;/*...Changer ici le temps de l'animation*/
}

@keyframes animate
{
  0%
  {
    width: 0;/*...Reprendre les chifres de .container3:before...*/
    height: 0;/*....................Idem........................*/
    border-top-color: white;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  33%
  {
    width: 100%;/*...Reprendre les chifres de .container3:before...*/
    height: 0;/*....................Idem........................*/
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: transparent;
    border-left-color: white;
  }

  66%
  {
    width: 100%;
    height: 100%;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: transparent;
    border-left-color: white;
  }

  100%
  {
    width: 100%;
    height: 100%;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: white;
    border-left-color: white;
  }
}

hello

Tu as besoin de donner une position à ton Lien.

Top ! avec position relative ça marche. Merci beaucoup !