Creación de Índices con CSS

Después de unos cuantos días sin escribir, vuelvo con una simple forma de crear índices en páginas web sin necesidad de tablas ni código fuente engorroso y enredado.

Lo primero que hay que hacer es crear las entradas en el índice con una lista, en esta caso se usó una lista ordenada (los índices están ordenados así que ... duh!) pero se puede usar lista no ordenadas, lo único que cambiaría sería las etiquetas <ol> por <ul>.

En el ejemplo se usó la siguiente lista:

<ol class="toc">
<li><span>Capítulo 1</span><a href="#">Página 1</a>
   <ol>
      <li><span>Sección 1.1</span><a href="#">Página 1</a></li>
      <li><span>Sección 1.2</span><a href="#">Página 1</a></li> 
   </ol>
</li>
<li><span>Capítulo 2</span><a href="#">Página 2</a></li>
<li><span>Capítulo 3</span><a href="#">Página 3</a>
   <ol>
      <li><span>Sección 3.1</span><a href="#">Página 4</a></li>
      <li><span>Sección 3.2</span><a href="#">Página 5</a>
         <ol>
            <li><span>Sección 3.1</span><a href="#">Página 4</a></li>
            <li><span>Sección 3.2</span><a href="#">Página 5</a></li> 
         </ol>    
      </li> 
   </ol>
</li>
<li><span>Capítulo 4</span><a href="#">Página 6</a></li>
<li><span>Capítulo 5</span><a href="#">Página 7</a></li>
</ol>

Este bloque de código endemoniado lo único que hace es mostrar una lista como la siguiente:

1. Capítulo 1Página 1
   1. Sección 1.1Página 1
   2. Sección 1.2Página 1
2. Capítulo 2Página 2
3. Capítulo 3Página 3
   1. Sección 3.1Página 4
   2. Sección 3.2Página 5
      1. Sección 3.1Página 4
      2. Sección 3.2Página 5
4. Capítulo 4Página 6
5. Capítulo 5Página 7

Para hacer que parezca un índice sólo se necesita agregar 4 ó 5 reglas de CSS.

ol.toc{
width: 50%;
}

ol.toc li {
clear:left;
border-bottom:dashed 1px #aaa;
height:1.05em;
margin-top:10px;
position:relative;
}

ol.toc a, ol.toc span {
background:#fff;
float:left;
position:absolute;
text-decoration:none;
padding: 0 5px 0 0;
}

ol.toc a {
padding: 0 0 0 5px;
right:0;
}

ol.toc ol{
list-style:lower-roman;
margin: 1.5em 0 1em 5%;
padding:0;
float:left;
display:block;
width:95%;
}

ol.toc ol ol{list-style: lower-alpha;}

El resultado se puede ver en http://josercl.googlepages.com/toc.html