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

<<>>
Imágen de perfil
Val: 34
Ha aumentado su posición en 15 puestos en CSS (en relación al último mes)

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


CSS

Publicado el 11 de Febrero del 2019 por joel
143 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
143 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