[RÉGLÉ] Le hover ne marche qu'à moitier

[schtroumph]

Salut

Je me fais des tests pour des effets sur les liens. Il y en a un je ne sais pas pourquoi il ne marche qu'à moitié.

Au hover le soulignement doit disparaître de la gauche vers la droite et à la place un autre soulignement doit le remplacer en apparaissant de la gauche vers la droite aussi. Et quand on enlève le curseur le second soulignement disparaît toujours de la gauche vers la droite et le premier soulignement reprend sa place de la gauche vers la droite.

La disparition du premier soulignement marche, mais pas l'apparition du second (voir sur jsfiddle.net).

Le CSS :

.lien-effet-10 a {
text-decoration:none;
background: linear-gradient(70deg, rgba(0,0,0) 100%, rgba(255,0,0) 100%);
background-position: bottom left, bottom left;
  background-size: 100% 14%, 0 14%;
background-repeat: no-repeat, no-repeat;

transition-duration: 1s;
transition-property: background-size;
}

.lien-effet-10 a:hover {
text-decoration:none;
background: linear-gradient(180deg, rgba(0,0,0) 100%, rgba(255,0,0) 100%);
background-position: bottom right, bottom left;
  background-size: 0 14%, 100% 14%;
  background-repeat: no-repeat, no-repeat;
  transition-duration: 1s;
  transition-property: background-size;
}

[Helloo]

Bonjour,

Je ne suis pas certain, mais peut-être avec 2 class séparée ?

[schtroumph]

C'est a dire ? une pour chaque couleur ?

[Helloo]

Je pensais juste à séparé les 2 partie
.lien-effet-10 a + .lien-effet-11 a:hover

Mais c'était juste une idée.

[lomart]

Bonjour,

Je verrai plus quelque chose comme cela : https://jsfiddle.net/69tw5ay4/

[Helloo]

Bonjour,

Je verrai plus quelque chose comme cela : https://jsfiddle.net/69tw5ay4/

Oui ça fonctionne bien, mais il veut de droite à la gauche comme j'ai compris.

[lomart]

Oui ça fonctionne bien, mais il veut de droite à la gauche comme j'ai compris.

Moi, j'ai lu :

Au hover le soulignement doit disparaître de la gauche vers la droite

mais ce n'est pas grave, il suffit de jouer sur

a::before, a::after {right: 0;} // ou left
a::before {transform-origin: left;}
a::after {transform-origin: left;}

[Helloo]

Effectivement, il me faut changer d'opticien

[schtroumph]

Lomart merci pour la solution. Je vais décortiquer ça car il y a beaucoup plus de code. Merci aussi a toi Helloo.