Buenos dias, hoy os muestro un breve ejemplo de como sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Lista Numerada</title>
</head>
<body>
<ul class="numbered-list">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Lista Numerada</title>
</head>
<body>
<ul class="numbered-list">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Lista Numerada</title>
</head>
<body>
<ul class="numbered-list">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</body>
</html>
Esto por norma general, como ya sabemos, devuelve puntitos, si nosotros en vez de puntitos queremos que devuelva números, sin ser una lista numerada, nuestro css, debe quedar de la siguiente manera:
body {
counter-reset: my-counter 0; //resetea el numero, empieza en 0
}
.numbered-list {
list-style-type: none;
padding: 0;
}
.numbered-list li::before {
counter-increment: my-counter;
content: counter(my-counter) ". ";
}
body {
counter-reset: my-counter 0; //resetea el numero, empieza en 0
}
.numbered-list {
list-style-type: none;
padding: 0;
}
.numbered-list li::before {
counter-increment: my-counter;
content: counter(my-counter) ". ";
}
body {
counter-reset: my-counter 0; //resetea el numero, empieza en 0
}
.numbered-list {
list-style-type: none;
padding: 0;
}
.numbered-list li::before {
counter-increment: my-counter;
content: counter(my-counter) ". ";
}
- Selecciona los elementos
lidentro de la lista (ul) con la clasenumbered-list. counter-increment: my-counter;incrementa el contadormy-counteren 1 para cada elemento de la lista.content: counter(my-counter) ". ";agrega el contenido del contador seguido de un punto y un espacio antes del contenido real del elementoli.
Este código CSS se utiliza para numerar los elementos de una lista desordenada de forma personalizada utilizando el contador my-counter.
RESULTADO:
Espero que os guste, feliz domingo. 🙂
Técnica Superior en Desarrollo de Aplicaciones Web | Junior Web Developer | Front-end Developer | Dispuesta a aprender nuevas tecnologías
0