En este artículo, aprenderemos cómo personalizar (decorar) los números en una lista ordenada. Usamos la propiedad de contraincremento para decorar los números.
Enfoque: es difícil agregar estilos CSS a los elementos <ol> directamente para personalizar los números. En su lugar, accedemos al rango de la lista ordenada y establecemos el estilo de lista CSS en «ninguno» para que el orden normal sea invisible. Después de conocer el rango, configuramos la propiedad de incremento de contador para ordenar la lista y agregamos propiedades de CSS para diseñar los números usando otras propiedades de CSS.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: En este ejemplo, cambiaremos el color de los números usando las propiedades de incremento de contador y restablecimiento de contador . En este ejemplo, los números del 1 al 4 se incrementan y el color se establece en «verde». Podemos diseñar los números según nuestros requisitos agregando propiedades CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customize numbers in ordered list</title>
<style>
ol {
list-style: none;
counter-reset: num;
}
ol li {
counter-increment: num;
}
ol li::before {
content: counter(num) ". ";
color: green;
}
</style>
</head>
<body>
<ol>
<li>GeeksforGeeks</li>
<li>Computer Science</li>
<li>CSS</li>
<li>HTML</li>
</ol>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, hemos seguido el mismo enfoque, se agregan algunas propiedades de estilo más al mismo archivo HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customizing numbers in ordered list</title>
<style>
ol {
list-style: none;
counter-reset: num;
}
ol li {
counter-increment: num;
font-size: 20px;
}
ol li::before {
content: "0" counter(num);
font-weight: bold;
color: green;
font-family: 'Segoe UI', Tahoma, Geneva,
Verdana, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<ol>
<li>GeeksforGeeks</li>
<li>Computer Science</li>
<li>CSS</li>
<li>HTML</li>
</ol>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priddheshinternship y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA