如何将页码添加到指向锚点的链接？

Question

I have in my webpage, several anchors (ie <a name="my-magical-anchor"></a> ) scattered along the page. I additionally have several links on my page which point to these anchors (ie <a href="#my-magical-anchor">Go to the Magical Anchor</a> ). For when the page is printed, I was wondering if it would be possible to modify the text of the link, using CSS or JavaScript, to read something like Go to the Magical Anchor (page 12) to indicate the page number the reader should flip to in the printed document.

I would like to, if possible, not have to manually assign page breaks, but instead have my content flow across the pages and then update the link text before printing.

Thanks.

Answer 1

Look at this article and go down to the section titled, "Cross-References": http://www.alistapart.com/articles/boom

The suggestion is to use target-counter , targeting the page counter, using the href attribute as the target link.

a.magical::after {
    content: "(page" target-counter(attr(href), page) ")"
}

The whole article is recommended too. Hat tip to Nathan Kot who linked to it.