The target-counter and target-counter CSS Level 3 properties retrieve counter values and display information from the destinations of link elements within HTML. For building a table of contents, these properties are especially relevant and useful. In the following example, we demonstrate the inclusion of support for these properties within pdfHTML's version 3.0.3 release.


In the following example, we use the following HTML code to build a basic table of contents which routes a user to pages 1, 2, and 3 respectively. We use target-counter to gather the page of each destination within the table of contents, and display that page number to the left of each link.

HTML code:

target-counter HTML + CSS Example
<!DOCTYPE html>
            .preface::before {
                content: target-counter(url('#id1'), page) ' ';

            .introduction::before {
                content: target-counter(url('#id2'), page) ' ';

            .chapterone::before {
                content: target-counter(url('#id3'), page) ' ';

    <body style="font-size: 30px; font-family: Arial;">
            <p class="preface"><a href="#id1">Preface</a></p>
            <p class="introduction"><a href="#id2">Introduction</a></p>
            <p class="chapterone"><a href="#id3">Chapter One</a></p>

        <p id="id1">Preface. This is on page: <a class="preface"></a> </p>

        <P style="page-break-before: always">

        <p id="id2">Introduction. This is on page: <a class="introduction"></a></p>

        <P style="page-break-before: always">

        <p id="id3">Page number. This is on page: <a class="chapterone"></a></p>


This HTML, when used with a viewer that allows for CSS 3, renders to look something like the following screenshot:

We use pdfHTML to then convert our above HTML into a valid PDF document as follows:


Then, when we are finished, we are left with the attached output PDF (see below):