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

Imágen de perfil
Val: 76
Bronce
Ha aumentado 1 puesto 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
356 visualizaciones desde el 11 de Febrero del 2019. Una media de 42 por semana
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
357 visualizaciones desde el 11 de Febrero del 2019. Una media de 42 por semana
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