Bonjour,
 
Avant toutes choses, je tiens à préciser que je sais qu'il existe quelques tutos qui expliquent comment créer des barres de progression en HTML/CSS. Cela-dit, ils ne répondent pas vraiment à ma question et la plupart expliquent surtout comment en faire des animations à grand coup de java script ce qui ne m'intéresse pas du tout.
 
Par ailleurs, je précise que je n'ai d'ordinaire pas de problème dans ce domaines mais je dois avouer que, n'ayant jamais rencontré ce genre d'exercice, je sèche un peu. Bref, trêve d'introduction, venons en au vif du sujet.
 
Initialement j'ai le code suivant (résultats de sondage) :

<ul>
<li>Un choix : <strong>10.33 %</strong></li>
<li>Un autre choix : <strong>60.10 %</strong></li>
<!-- [...] -->
</ul>

 
Voulant y adjoindre des barres de progression, j'ai tenté d'ajouter le code CSS suivant :
 

li  strong {
  display : block;
  background : transparent url('progressbar.png') no-repeat top left;
}

 
Et j'ai modifié mon HTML ainsi :
 

<ul>
<li>Un choix : <strong style="width:10.33%">10.33 %</strong></li>
<li>Un autre choix : <strong style="width:60.10%">60.10 %</strong></li>
<!-- [...] -->
</ul>

 
Il se trouve que ça fonctionne. Mais on atteint les limites de ce système lorsqu'on a des pourcentages trop bas. Le conteneur devient alors trop peu large pour accueillir le texte et je me retrouve avec des retours à la ligne.
 
Je suis donc à la recherche d'une solution.
 
Je vous remercie par avance pour vos réponses

Tout d'abord, sémantiquement, la balise strong n'est pas appropriée à ce que tu veux faire. Utilise plutot une classe.
 
Moi je te conseille de faire deux div :
 
- Un conteneur de largeur fixe qui contiendra ton petit div ainsi que ton texte
- Le deuxième de largeur variable (fonction du pourcentage) placé en position:absolute AVANT le texte.
 
Ainsi le texte ne risque pas d'etre écrasé par son conteneur
 

Concernant la baliser strong, il me semble que si on ne tient compte que du document HTML, la sémantique est respecté. En effet, cette balise contient le pourcentage de résultat pour lequel je souhaitais faire une mise en exergue (source W3C , mise en évidence quoi). Encore que <em> aurait peut être été plus appropriée.
 
Ainsi, partant de ce constat, et sachant qu'a mon avis il faut éviter le plus possible de modifier le font pour modifier la forme, comprenez modifier le HTML pour obtenir un rendu différent, j'ai décidé de partir la dessus. (Etait-ce clair ?)
 
Après je reconnais que ce n'était peut être pas la bonne solution, mais pas pour une question de sémantique à mon avis.
 
Sinon effectivement ta proposition est intéressante.