18041 sujets

Questions générales et questions de débutants

[Résolu] Cibler/sélectionner le texte sur un lien textuel

Bonjour à tous et à toutes,

(Je me sens tout bête à poser la question, mais voilà) J'ai un menu déroulant avec 2 langues (Français et Anglais) avec, devant chaque langue le drapeau kivabien.
Voici le code HTML du fameux menu :

<ul class="dropdown-menu sm-nowrap" role="group" aria-hidden="true" aria-labelledby="sm-1642539551680673-1" aria-expanded="false">
    <li>
        <a href="?lang=fr" class="text-left">
            <i class="flag-icon flag-icon-fr"></i>
            Français
        </a>
    </li>
    <li>
        <a href="?lang=en" class="text-left">
            <i class="flag-icon flag-icon-gb"></i>
            Anglais
        </a>
    </li>
</ul>


Je souhaiterais masquer en CSS uniquement les mots :
- Français
- Anglais

Comme sélecteur, j'ai essayé :
.text-left:not(.text-left i.flag-icon)
ou
.dropdown-menu > li > a.text-left:not(.dropdown-menu > li > a.text-left i.flag-icon)
ou
.dropdown-menu > li > a.text-left text

mais ça ne fonctionne pas.
En faisant :
.dropdown-menu > li > a.text-left * {
display: none;
}
je me suis aperçu que je masquais uniquement les drapeaux. J'ai donc fait ça :
.dropdown-menu > li > a.text-left:not(.dropdown-menu > li > a.text-left *) {
display: none;
}
mais ça ne fonctionne pas non plus.

C'est bête comme "choux" je vous l'accorde, mais je n'y arrive pas.

Pouvez-vous m'aider SVP ?
Merci par avance

P.S : Je préfère éluder tout de suite la question : non, je ne peux pas l'enlever via le HTML, je n'ai pas la main dessus.
Modérateur
Bonjour,

1) Tu mets a.text-left en position:relative (pour qu'il soit la référence en terme de positionnement des drapeaux), et display:block (pour pouvoir lui donner une dimension).
2) Tu donnes à a.text-left une dimension, et éventuellement un overflow:hidden (pour assurer).
3) Tu donnes aussi à a.text-left la propriété color:transparent, ce qui va cacher les textes qu'elle contient sans les retirer du flux.
4) Tu mets la balise <i> contenant les drapeaux en position:absolute, et tu lui donnes une dimension appropriée.

A priori, ça devrait le faire comme ça.

Voir un exemple fait avec ton code à https://jsfiddle.net/parsimonhi/a20ybrk5/

Amicalement,

PS: je n'avais pas de drapeau britannique sous la main. J'ai dû faire avec un drapeau allemand, j'espère que ça ira quand même ! Smiley lol
Modifié par parsimonhi (19 Jan 2022 - 00:06)
Meilleure solution
Super ! Merci Smiley merci Smiley merci
Ta solution est bien plus complexe que je le pensais, mais ça a le mérite de fonctionner
Encore merci Smiley good Smiley cligne Smiley merci
Modérateur
Bonjour,

Tu as raison, j'en ai trop mis et on peut simplifier. Fondamentalement, il suffit de donner la même taille à a.text-left et i.flag-icon, et à cacher tout ce qui dépasse.
a.text-left,
i.flag-icon {
  display: block;
  width: 3em;
  height: 2em;
}

a.text-left {
  overflow: hidden;
}

Amicalement,
Modifié par parsimonhi (19 Jan 2022 - 01:28)
Sujet clos
Aller à