examples - li html

Hacer que los artículos de la lista ordenada ABC tengan un estilo atrevido

Question

Tengo una lista ordenada html con tipo establecido en "A"

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

Por lo tanto, cada elemento de la lista comenzará con A, B, C, etc.

Me gustaría diseñar las letras A, B, C para que sean audaces. He intentado configurar font-weight: bold; a través de css, pero no funcionó. ¿Alguna sugerencia sobre cómo hacer esto?

Answer 1

¿Estás seguro de haber aplicado correctamente los estilos o de que no hay otra hoja de estilo que interfiera con tus listas? Intenté esto:

<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>

Luego en la hoja de estilo:

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

Y en negrita el A , B , C , etc. y no el texto.

(Probado en Opera 9.6, FF 3, Safari 3.2 e IE 7)

Answer 2

Como solución alternativa y superior, puede usar un contador personalizado en un elemento anterior. No implica ningún marcado HTML adicional. Se debe usar un restablecimiento CSS junto a él, o al menos eliminar el estilo del elemento ol ( list-style-type: none, reset margin ); de lo contrario, el elemento tendrá dos contadores.

<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 ejemplo: http://jsfiddle.net/xpAMU/1/

Answer 3

Podrías hacer algo como esto también:

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

Es un código simple para los principiantes.

Este código ha sido probado en "Mozilla, Chrome y Edge ...

Answer 4

Podrías hacer algo como esto también:

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

Entonces no tienes atributos de "estilo" en tu HTML

Answer 5

Sé que esta pregunta es un poco antigua, pero todavía aparece primero en muchas búsquedas de Google. Quería agregar una solución que no implique la edición de la hoja de estilos (en mi caso, no tuve acceso):

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

Answer 6

un poco de trampa, pero funciona:

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; }