Listas numeradas automáticamente con CSSEstréllate y Arde

Las propiedades CSS counter-reset, counter-increment y content junto con la función counters() permiten crear listas numeradas automáticamente con CSS.

Ejemplo de listas numeradas automáticamente con CSS: este código:

<style>
.numera ol {
  counter-reset: item;
}
.numera ol > li {
  list-style:none;
}
.numera ol > li:before {
  content: counters(item, ". ") ".- ";counter-increment: item;
}
</style>
<div class="numera">
  <ol type="1">
    <li>elemento 1</li>
    <li>elemento 2
      <ol type="1">
        <li>elemento 2-1</li>
        <li>elemento 2-2
          <ol type="1">
            <li>elemento 2-2-1</li>
            <li>elemento 2-2-2</li>
            <li>elemento 2-2-3</li>
          </ol>
        </li>
        <li>elemento 2-3</li>
      </ol>
    </li>
    <li>elemento 3</li>
  </ol>
</div>

… se ve así:

elemento 1
elemento 2
1. elemento 2-1
2. elemento 2-2
  1. elemento 2-2-1
  2. elemento 2-2-2
  3. elemento 2-2-3
3. elemento 2-3
elemento 3

Recursos

Numeración con CSS: Automatic counters and numbering

Estréllate y Arde menos de 575entre 575 y 800entre 800 y 875entre 875 y 935entre 935 y 1024entre 1024 y 1140mas de 1140

Goodbye Microsoft, Hello Linux!

Listas numeradas automáticamente con CSS

Deja un comentario Cancelar respuesta