Discussion :

[Zalawy]

Bonjour,

Je me suis trompé d'avoir publié mon post à un autre endroit mais je n'ai pas pu le déplacer, ce n'est pas grave et j'espère qu'ici, c'est le bon endroit pour vous demander l'aide.
Pour faire simple, mon souhait est d'afficher un astérisque obligatoire pour un titre de label, alors qu'il y a une balise span comme une description du titre qui se trouve dans la balise label.

Voici un bout de code d'HTML :

Code html :

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

1
2
3
<label class="required"> Mot de passe
	<span class="text">Veuillez saisir le mot de passe</span>
</label>

Et celui de CSS :

Code :

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

1
2
3
4
.required : after {
	content: "*";
	color: red;
}

Le résultat attendu :
Mot de passe
Veuillez saisir le mot de passe
*

Alors que le résultat souhaité :
Mot de passe *
Veuillez saisir le mot de passe

J'ai essayé de positionner en CSS, j'ai googlisé partout et aucun qui indique le code des éléments avant la balise span comment positionner l'astérisque obligatoire avant la description en CSS?

Merci à l'avance de votre aide

[Pytet]

Bonjour,

En solution simple, tu peux soit mettre la balise span au même niveau que la balise label, soit créer une autre balise span pour appliquer la classe required uniquement sur "Mot de passe" :

Code html :

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

1
2
3
4
5
6
7
8
9
<label class="required">Mot de passe</label>
<span>Veuillez saisir le mot de passe</span>
 
<hr>
 
<label>
  <span class="required">Mot de passe</span>
  <span>Veuillez saisir le mot de passe</span>
</label>

Au passage, ne pas oublier l'attribut for pour la balise label si l'input n'est pas inclus dans la balise label.

[Zalawy]

Je vous remercie de votre réponse. Mais je ne suis pas sûre de comprendre votre proposition d'ajouter une autre balise span Je souhaite simplement positionner l'astérisque après le label, soit avant la balise span.

Avec les codes indiqués sur mon message précédent, ce serait-il possible d'afficher l'astérisque après le label et avant le span? Sachant que je veux modifier le CSS sans changer le balisage html

[NoSmoking]

Bonjour,

Le résultat attendu :
Mot de passe
Veuillez saisir le mot de passe
*

Alors que le résultat souhaité :
Mot de passe *
Veuillez saisir le mot de passe

le résultat attendu est bien le résultat souhaité non !?!

ce serait-il possible d'afficher l'astérisque après le label et avant le span?

Comment est assuré le retour à la ligne de ton élément <span> ?

[Zalawy]

Merci de votre retour rapide.

Quant au résultat attendu et résultat souhaité, effectivement c'est bien le même. Je m'excuse pour la confusion
Le résultat du test que j'ai fait est plutôt :
Mot de passe
Veuillez saisir le mot de passe
*

VS au résultat attendu :
Mot de passe *
Veuillez saisir le mot de passe

Bonjour,
Comment est assuré le retour à la ligne de ton élément <span> ?

Dès que j'ai utilisé after pour le label, il n'y a rien de retour pour <span> qui est simplement un contenu phrasé.

[NoSmoking]

Dès que j'ai utilisé after pour le label, il n'y a rien de retour pour <span> qui est simplement un contenu phrasé.

Les éléments <label>, tout comme les <span>, sont des éléments « inline » donc qui ne vont pas à la ligne naturellement sauf en fin de ligne évidement. Donc par quel heureux hasard le <span> se retrouve en dessous ?

Tu devrais normalement obtenir :

Mot de passe Veuillez saisir le mot de passe *

Il y a du flex la dedans !?!