Bonjour !

J'aimerais réaliser un effet CSS en hover sur des liens mais j'ai beau chercher je n'y arrive pas.

J'ai tenté de créer une div pour le trait et une div pour le texte mais comment et où indiquer le hover?

Si quelqu'un pouvait m'éclairer ce serait top !

Voici ce à quoi j'aimerais arriver :

Merci !

-
Edité par henjuu 16 janvier 2021 à 18:49:20

Bonjour,

Il faut faire:

.LeNomDeTaDiv:hover {
background-color:blue;
}

Et tu auras au survol de la souris un fond bleu. Mais avant il faut indiqué comment doit être ta div sans hover ce qui donne

.TaDiv{}

.TaDiv:hover{
Background-color:blue
}

-
Edité par Bidouillman 16 janvier 2021 à 19:18:56

Bonjour,

il faut utiliser le pseudo-element before, combiné avec hover, beaucoup d'exemples en cherchant "css before hover" dans ton moteur de recherche préféré

Bonjour,

Merci beaucoup, je ne connaissais pas du tout l'existence des ::before et ::after 

J'ai réussi à intégrer une ligne sur mes liens, mais problème, la ligne se positionne SUR mes liens et non avant. Je n'arrive pas à avoir l'effet de décalage que je souhaite. Ca donne ça :

Voici mon code :

a{
    text-align: center;
    position: relative;
}

a:hover::before {
    content: "";
    left: 0;
    right: 0;
    height: 2px;
    width: 30px;
    background: #000000;
    position: absolute;
    top: calc(50% - 1px);
}

un padding-left de 40px sur a:hover va déplacer le texte vers la droite, comme sur ton schéma,
j'ajouterais une transition:0.5s sur a, et on a un bel effet

a{
   ...
   transition:0.5s;
}
a:hover {
   ...
   padding-left:40px;
}

-
Edité par ChrisLebure 17 janvier 2021 à 11:18:14

Ah mais oui aha pourquoi je n'y ai pas pensé 

Merci beaucoup de votre aide, j'aurai appris les ::before et ::after !

Sujet résolu