Discussion :

[pierrot10]

Bonjour,

Je vais éclaircir mon titre

J'ai un menu et quand on passe la souris sur le menu ou si le menu est actif, il faut un soligné (une image de fond) comme ceci



Le problème est quand le menu passe à la ligne car il y a plusieurs mots, le souligné est comme ceci


Est-ce que l'on peut faire en sorte que le souligné soit sous le texte de dessous, et nom pas aligné sur l'ensemble du texte?

Mon CSS est comme ceci

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.d-flex > li.current > a{
    background-image: url("../img/bg-menu-link.png");
    background-repeat: no-repeat;
    background-position: bottom center;
}

J'ai pensé à mettre ce souligné sur le li, mais il ne se trouvera pas sous le texte, mais en bas du li, et comme un des menu est sur deux ligne, les autres li prennent la hauteur du li le plus haut (felx).

J'aimerais bien que ce souligné sout sous le texte, le "plus bas"....

Merci

[NoSmoking]

Bonjour,
met le background sur le <li> et non sur le <a>.

[jreaux62]

Bonjour,

j'aurais bien dit de le mettre sur le :after...
mais on manque de code (HTML / CSS).

[NoSmoking]

mais on manque de code (HTML / CSS).

le sélecteur, .d-flex > li.current > a, nous montre la structure, même si le > est en trop à moins qu'il y ait plusieurs <a> dans le <li> ce qui constituerait un erreur de conception à mon sens.

j'aurais bien dit de le mettre sur le :after...

pourquoi passer par l'ajout d'un pseudo-élement dans ce cas, quel gain ?

[pierrot10]

Bonjour,

Je m'excuse de n'avoir pas réagit et je vous remercie pour vos commentaires.
J'ai en effet mis le souligné sur le LI et j'ai centré mon texte, ce qui va très bien finalement.

J'ai aussi supprimé le > avanrt le a, comme suggéré par NoSmoking

Merci beaucoup