html - Print page numbers for table of contents using CSS in Chrome -

html - Print page numbers for table of contents using CSS in Chrome -

is there way print target page numbers hyperlinks linked various places within same document?

<h1>table of contents</h1> <ul> <li><a href="#introduction">introduction</a></li> </ul> ... <section id="introduction"> <!-- appears, example, on page 3 when printed --> <h1>introduction</h1> ... </section>

so output like:

table of contents (page 0) introduction.........................3 ... introduction (page 3)

i need work google chrome browser when printing pdf (on os x).

is there css or javascript trickery allow me accomplish this?

i have no thought if work in pdf or not, reply question of how can done in css:

you can generate numbers using counter-increment on pseudo element in css:

note changed <ul> <ol> ordered list, whether utilize list-style or not.

ol { counter-reset: list-counter; } li:after { counter-increment: list-counter; content: counter(list-counter); float: right; }

making little dotted line in between text , number takes little more work, can accomplish adding in span elements , using css display: table; , display: table-cell; lay them out properly:

<ol> <li><span>test</span><span class="line"></span></li> <li><span>test2</span><span class="line"></span></li> <li><span>test3</span><span class="line"></span></li> </ol> li { display: table; } li span, li:after { display: table-cell; vertical-align: bottom; } li span.line { border-bottom: 1px dotted #000; width: 100%; }

setting width 100% on span.line element, while not setting width @ forces fill of remaining space (this due table-cell display elements not beingness allowed break new lines, , preventing overflow of content)

see total demo

it's not cleanest approach have add together span elements, bit of tricky task. perhaps else able take time think of more efficient way accomplish it? set underline under entire <li>, , skip markup, @ cost of beingness little less cool.

html css google-chrome printing