Comment fixer la largeur d'un pseudo-élément 'before'

Bonjour,

J'utilise deux caractères (triangle pointe droite + triangle pointe bas) pour afficher le statut d'une ligne destinée à cacher/montrer un contenu.

La largeur de l'un n'étant pas égale à celle de l'autre, j'aimerais éliminer ce petit décalage :
• Soit en fixant une largeur à ce pdeuso-élément
• Soit en fixant le début du texte à une position déterminée

Après avoir tenté pas mal de solutions, je dois dire que je sèche.

Dans l'idéal, trouver flèches de largeur parfaitement identique serait parfait, mais je n'ai pas trouvé la bibliothèque de caractères idoine.

Si quelqu'un avait une piste, ou un bout de code, je lui en serais très reconnaissant.

Merci d'avance.

?
?

çà peut convenir, dans une police a largeur fixe ?

ah zut çà ne passe pas ici

donc triangle vers la droite ▶ et triangle vers le bas ▼
en police courier par ex
Modifié par drphilgood (01 May 2023 - 19:29)

Bonjour,

Plutôt que de changer de caractère sur le pseudo-élément au moment du changement d'état (:focus, :hover, :active...), pourquoi ne pas plutôt lui faire effectuer une rotation ?

.ma-classe:hover::after {
  transform: rotate(-90deg);
}

J'utilise cette solution ici par exemple : Details/Summary.

Olivier C a écrit :
Bonjour,

Plutôt que de changer de caractère sur le pseudo-élément au moment du changement d'état (:focus, :hover, :active...), pourquoi ne pas plutôt lui faire effectuer une rotation ?

.ma-classe:hover::after {
  transform: rotate(-90deg);
}

J'utilise cette solution ici par exemple : Details/Summary.

Merci Olivier C, Quelques lectures m'ont enseigné que 'rotate' n'est pas appliqué par certains navigateurs.

Mais supposons l'utilisation du caractère html ▲ et CSS \25b2 que je place (suivi d'un espace) dans la partie du CSS consacrée au contenu fermé

checked~div{display:block}[id^="obxS"]+label:before{content:"\0025b2\000020"}

Ce que je n'ai pas trouvé, c'est à quel endroit dans ce code j'insère la fonction 'rotate (180deg)' permettant de figurer le statut d'ouvert.
Modifié par mango (01 May 2023 - 20:47)

mango a écrit :


Merci Olivier C, Quelques lectures m'ont enseigné que 'rotate' n'est pas appliqué par certains navigateurs.

Bonjour,

Tu parles probablement de la syntaxe

rotate:180deg;

et pas de

transform:rotate(180deg);

Qui pour les deux syntaxes, requièrent de préférence, un display autre que inline pour s'appliquer. Un pseudo par défaut à un display:inline; que tu peut passé à inline-block, permettant aussi de lui donner une taille .

Cdt

gcyrillus a écrit :


Bonjour,

Tu parles probablement de la syntaxe

rotate:180deg;

et pas de

transform:rotate(180deg);

Qui pour les deux syntaxes, requièrent de préférence, un display autre que inline pour s'appliquer. Un pseudo par défaut à un display:inline; que tu peut passé à inline-block, permettant aussi de lui donner une taille .

Cdt

Merci gcyrillus,

En fait je vois des exemple sortis de leur contexte, qui m'éclairent en partie, mais pas tout à fait.

Pour moi, le pseudo élément 'before' ainsi que le texte qui suit (genre 'cliquer ici pour déployer') se trouvent tous les deux dans un même élément 'label' par défaut display 'block'.

Je ne sais donc pas comment agir seulement sur le 'before' pour le faire tourner.

J'avais testé

transform:rotate(180deg);

Mais pas

rotate:180deg;

Et vais voir ce que cela donne
Modifié par mango (01 May 2023 - 21:34)

transform:rotate() fonctionne à partir de Firefox 3.5, Chrome 4, Edge 12, IE 9, Safari 3.1. En terme de soucis de compatibilité il y a pire...

Pour ce qui est de la sélection, j'ai montré un exemple plus haut. À adapter dans votre contexte bien sûr :

label:hover::before

Modifié par Olivier C (01 May 2023 - 22:21)

Olivier C a écrit :
transform:rotate() fonctionne à partir de Firefox 3.5, Chrome 4, Edge 12, IE 9, Safari 3.1. En terme de soucis de compatibilité il y a pire...

Pour ce qui est de la sélection, j'ai montré un exemple plus haut. À adapter dans votre contexte bien sûr :

label:hover::before

Merci Olivier C,

Je crois avoir compris la syntaxe du code 'rotate' mais dans le code ci-dessous, qui fonctionne, je ne vois pas à quel endroit il me faut ajouter fonction et paramètre 'rotate', c'est là où est mon obstacle.

checked~div{display:block}[id^="obxS"]+label:before{content:"\0025b2\000020"}

mango a écrit :


Merci gcyrillus,

...

Je ne sais donc pas comment agir seulement sur le 'before' pour le faire tourner.

J'avais testé

transform:rotate(180deg);

Mais pas

rotate:180deg;

Et vais voir ce que cela donne

rebonjour,

de rien, mais je me suis mal exprimé.

A. rotate:180deg; est celui qui peut poser probléme car pas compris partout.

B. Si ton label est en display:block; son pseudo est lui toujours en ligne par défaut. tu dois au minimum lui donner un display:inline-block; pour qu'une transformation soit applicable. display n'est pas une valeur héritable.

Quelques exemples qui modifient le contexte de formatage des pseudos pour leur appliquer une transformation (il n'y a pas que inline-block ). https://codepen.io/gc-nomade/pen/GRYMrOM

Cdt

mango a écrit :
Je crois avoir compris la syntaxe du code 'rotate' mais dans le code ci-dessous, qui fonctionne, je ne vois pas à quel endroit il me faut ajouter fonction et paramètre 'rotate', c'est là où est mon obstacle.

Bon, me voilà connecté à un ordinateur, ça va être beaucoup plus simple pour écrire du code... Donc :

checked~div { /* c'est un custom élément ? on est bien d'accord ? parce que si c'est une classe il manque un point... */
  display:block;
}
[id^="obxS"] + label::before { /* les pseudos éléments s'écrivent avec deux fois un double-point */
  content: '\0025b2\000020';
}
[id^="obxS"] + label:focus::before,
[id^="obxS"] + label:hover::before,
[id^="obxS"] + label:active::before {
  transform:rotate(-90deg); /* Et voilà ! */
}

J'ai bien mis -90deg et non 180deg, en raison de l'énoncé de départ :

mango a écrit :
J'utilise deux caractères (triangle pointe droite + triangle pointe bas) pour afficher le statut d'une ligne destinée à cacher/montrer un contenu.

Après, à vous de peaufiner.
Modifié par Olivier C (02 May 2023 - 00:00)