Faire en sorte que les éléments de la liste ordonnée ABC soient en gras

Question

J'ai une liste ordonnée html avec un type défini sur "A"

 <ol type="A">...</ol>
 

Ainsi, chaque élément de la liste commencera par A, B, C, etc.

Je voudrais styliser les lettres A, B, C en gras. J'ai essayé de définir le poids de la police: bold; via css, mais cela n'a pas fonctionné. Des suggestions sur la façon de procéder?

Answer 1

un peu de triche, mais ça marche:

HTML:

 <ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>
 

CSS:

 li span { font-weight: normal; }
 

Answer 2

Comme solution alternative et supérieure, vous pouvez utiliser un compteur personnalisé dans un élément before. Il n'implique aucun balisage HTML supplémentaire. Une réinitialisation CSS doit être utilisé à côté, ou au moins un style retiré de la ol élément ( list-style-type: none, reset margin ), sinon l'élément aura deux compteurs.

 <ol>
    <li>First line</li>
    <li>Second line</li>
</ol>
 

CSS:

 ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}
 

Un exemple: http://jsfiddle.net/xpAMU/1/

Answer 3

Êtes-vous sûr d'avoir correctement appliqué les styles ou qu'aucune autre feuille de style n'interfère avec vos listes? J'ai essayé ceci:

 <ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>
 

Puis dans la feuille de style:

 ol {font-weight: bold;}
ol li span.label {font-weight:normal;}
 

Et il a mis en gras le A , B , C etc et non le texte.

(Testé dans Opera 9.6, FF 3, Safari 3.2 et IE 7)