Creating a Table of Contents (TOC)

It may look like this:

Installing the Software ..........................10
   On Windows ....................................12
   On Mac.........................................17

There should be some structure in your document that reflects the tree of the TOC, with ID links.

 <ul class="toc">
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#installing">Installing the Software</a></li>
    <li><ul>
          <li><a href="#installing_win">On Windows</a></li>
    </ul></li>
    <li><ul>
          <li><a href="#installing_mac">On Mac</a></li>
    </ul></li>
 </ul>

You can use the same target-counter function as for Cross References, but suppose that you want to create a special page for the TOC:

@page toc {
  @top-center {
    content: "Table of Contents";
  }
  @bottom-center {
    content: counter(page, lower-roman);
  }
}

This page places the "Table of Contents" text in the header of the page hosting the TOC and puts the number of the TOC page in the footer, with lower roman digits.

The following example associates the defined page to the <ul> element that gives the structure:

ul.toc {
  page: toc;
}

To style the TOC entries, this next snippet removes the bullet decoration from the <li> elements, then marks the <a> element as being a link (the name for each TOC entry is defined inside an <a> element).

ul.toc li {
    list-style-type:none;    
}
ul.toc a {
    display: block; /* Only necessary when using a leader */
    link: attr(href);
    text-decoration:none;
}

Also, it uses the page number of the target element (after the leader):

ul.toc a:after{
    color:blue;
    content: leader(".") target-counter(attr(href), page);
    link: attr(href);
}