css - quitar - ¿Hay alguna manera de hacer que los números en la lista ordenada sean negritas?
poner negrita en style html (7)
Alrededor de un año después, pero como esto también podría ser interesante para otros que vengan aquí en el futuro:
Otra posibilidad fácil sería envolver el contenido del elemento de la lista en un <p> , el estilo del <li> como negrita y el <p> como regular. Esto también sería preferible desde un punto de vista IA, especialmente cuando <li> s puede contener sub-listas (para evitar mezclar nodos de texto con elementos de nivel de bloque).
Ejemplo completo para su conveniencia:
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > p {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
</ol>
</body>
</html>
Si prefiere un enfoque más genérico (que también cubra otros escenarios como <li> con descendientes distintos de <p> , puede usar li > * lugar de li > p :
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > * {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
<li>
<code>List Item 4.</code>
</li>
</ol>
</body>
</html>
(Consulte la lista de elementos 4 aquí que es ol / li / code y no ol / li / p / code aquí. Solo asegúrese de usar el selector li > * y no li * , si solo quiere diseñar descendientes de nivel de bloque como regular, pero no en línea como "foo <strong> palabra en negrita </strong> foo".
¿Hay algún selector de CSS para adjuntar un cierto estilo a la parte numérica de una lista ordenada solamente?
Tengo HTML como:
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
Que debería salir:
1.a
2.b
3.c
Necesito hacer 1., 2. y 3. en negrita , mientras dejo a, b, c regular.
Soy consciente de la <span> solución alternativa ...
Esta es una actualización para la respuesta de dcodesmith https://.com/a/21369918/1668200
La solución propuesta también funciona cuando el texto es más largo (es decir, las líneas deben envolverse): Fiddle actualizado
Cuando está utilizando un sistema de grillas, es posible que tenga que hacer una de las siguientes acciones (al menos esto es cierto para Foundation 6 - no podría reproducirlo en el Fiddle):
- Añada
box-sizing:content-box;a la lista o su contenedor - O cambie
text-indent:-2em;a-1.5em
PD: Quería agregar esto como una edición a la respuesta original, pero fue rechazado.
La respuesta anterior tiene un efecto secundario que convierte todos los tipos de listas en numéricas. <ol type="a"> mostrará 1. 2. 3. 4. en lugar de abcd
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
/* Add support for non-numeric lists */
ol[type="a"] > li:before {
content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
content: counter(item, lower-roman) ".";
}
El código anterior agrega soporte para letras minúsculas, números romanos en minúsculas. Al momento de escribir, los navegadores no diferencian los selectores de mayúsculas y minúsculas del tipo, por lo que solo puedes elegir mayúsculas o minúsculas para tus tipos alternativos, supongo.
Si está utilizando Bootstrap 4:
<ol class="font-weight-bold">
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
Tuve un problema similar al escribir un boletín informativo. así que tuve que alinear el estilo de esta manera:
<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
ol {
counter-reset: item;
}
ol li { display: block }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}
CSS
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}