Discussion :

[pierrot10]

Bonjour,

Dans mon texte, il y a des parties qui meritent une attention. Pour cela, on utilise des atérix *, **, **

Plus bas, je dois faire cela

Le texte doit être aligné, comme si j'utilisais des ol avec une numérotation.

Pour utilisé des astérix, je modifie mon CSS ainsi:

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ol.asterix li{
	color:var(--default) !important;
	margin-left: 0px !important;
	padding-left:0px !important;
	font-weight: normal !important;
	list-style:none 
}
ol.asterix li:before{
 
}
ol.asterix li:nth-child(1):before {
   content: "*" 
}
 
ol.asterix li:nth-child(2):before {
   content: "**" 
}
ol.asterix li:nth-child(3):before {
   content: "***" 
}
ol.asterix li:nth-child(4):before {
   content: "****" 
}

Mon problème, c'est que cela me donne ceci:


J'ai cherché à ajouter de margin/padding left, mais j'ai toujours un décalage.

J'ai essayé plusieurs trucs sans succès

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
ol.asterix li{
	text-indent: 1em;
}
 
ol.asterix li:before{
	text-indent: 1em;
}
ol.asterix li:nth-child(1):before {
   content: "*\00a0\00a0\00a0";
}

Y-a-t-il un moyen d'avoir un contrôle sur l'alignement du texte?

Merci

[NoSmoking]

Bonjour,
tu n'en es pas loin mais le pseudo-élément before est de type inline par défaut donc il n'occupe que la place nécessaire pour l'affichage de leur contenu. Il faut donc les rendre dimensionnable en les déclarant inline-block.

Une solution en passant par des classes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
ol {
  list-style-type: none;
}
li:before {
  content: "\00A0";
  display: inline-block;
  min-width: 5ch;
}
li.star-1:before {content: "*";}
li.star-2:before {content: "**";}
li.star-3:before {content: "***";}
li.star-4:before {content: "****";}
li.star-5:before {content: "*****";}

Code html :

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

1
2
3
4
5
6
7
<ol>
  <li class="star-1">Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li class="star-4">Quatre</li>
  <li>Cinq</li>
</ol>

[pierrot10]

Hello NoSMoking,

Merci pour ta réponse.
mais quel est la différence entre

Code CSS :

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

li.star-2:before {content: "**";}

et

Code CSS :

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

li:nth-child(2):before {  content: "**"}

Ca ne fait pas la même chose, au final?

Maintenant, j'ai essayé ta proposition (en gardant les nth-child)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ol.asterix li{
	color:var(--default) !important;
	margin-left: 0px !important;
	padding-left:0px !important;
	font-weight: normal !important;
	list-style:none;
 
}
ol.asterix li:before{
	content: "\00A0";
	display: inline-block;
	min-width: 5ch;
 
}
ol.asterix li:nth-child(1):before {
   content: "*";
}
 
ol.asterix li:nth-child(2):before {
   content: "**" 
}
ol.asterix li:nth-child(3):before {
   content: "***" 
}
ol.asterix li:nth-child(4):before {
   content: "****" 
}

C'est beaucoup mieux
Ce n'est pas très grave si on 3 li à la place de 4, et que l'espace entre l'asterix et le texte de change pas. Ce qui me gène plus, c'est si le texte du li est long, la ligne deux (et les suivantes) ne sont pas alignées avec la première
exemple après le premier tableau: http://8a488bgpye.preview.infomaniak...e/ecolage.html

[NoSmoking]

En fait je n'avais pas bien saisi ton besoin, je pensais à une notation

Le CSS qui devrait le faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ol {
  padding: 0 4em;
  list-style-type: none;
}
li {
  position: relative;
  margin-bottom: .5em;
}
li:before {
  content: "\00A0";
  position: absolute;
  left: -4em;
}
li:nth-child(1):before {content: "*";}
li:nth-child(2):before {content: "**";}
li:nth-child(3):before {content: "***";}
li:nth-child(4):before {content: "****";}
li:nth-child(5):before {content: "*****";}

[pierrot10]

Super, merci