Código de CSS - Enumerar de forma automática elementos con CSS

Imágen de perfil
Val: 179
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Enumerar de forma automática elementos con CSSgráfica de visualizaciones


CSS

Publicado el 11 de Febrero del 2019 por joel
547 visualizaciones desde el 11 de Febrero del 2019
En este ejemplo se numeran varias listas encadenadas, pero se puede utilizar con cualquier tipo de elemento de tu web.

enumerar-lista


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

counter-reset: Inicializa el contador y define el nombre del contador. Por defecto empieza en 0

counter-increment: incrementa o decrementa el contador
1
counter-increment: miContador-1

counter: muestra el contador

1

Publicado el 11 de Febrero del 2019gráfica de visualizaciones de la versión: 1
548 visualizaciones desde el 11 de Febrero del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
 
    <style>
    ul {
        counter-reset: miContador;
    }
 
    li {
        list-style:none;
    }
 
    li::before {
        counter-increment: miContador;
        content: counters(miContador, '.') ' - ';
    }
 
    </style>
 
</head>
<body>
 
</body>
 
<ul>
    <li>opcion de mi lista</li>
    <li>opcion de mi lista</li>
    <li>
        opcion de mi lista
        <ul>
            <li>opcion de mi lista</li>
            <li>opcion de mi lista</li>
            <li>opcion de mi lista</li>
            <li>
                opcion de mi lista
                <ul>
                    <li>
                        opcion de mi lista
                        <ul>
                            <li>opcion de mi lista</li>
                            <li>
                                opcion de mi lista
                                <ul>
                                    <li>opcion de mi lista</li>
                                    <li>opcion de mi lista</li>
                                </ul>
                            </li>
                            <li>opcion de mi lista</li>
                        </ul>
                    </li>
                    <li>opcion de mi lista</li>
                    <li>opcion de mi lista</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
 
</html>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5067
Revisar política de publicidad