Html 在Chrome中使用CSS打印目录的页码

是否有一种方法可以通过链接到同一文档中不同位置的超链接打印目标页码

<h1>Table of Contents</h1>
<ul>
    <li><a href="#introduction">Introduction</a></li>
</ul>

...

<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
    <h1>Introduction</h1>
    ...
</section>

我只需要在打印为PDF（在OSX上）时使用谷歌Chrome浏览器

---

是否有一些CSS或JavaScript技巧可以让我实现这一点？

我不知道这在PDF中是否有效，但要回答如何在CSS中实现这一点的问题：

您可以在css中的伪元素上使用

计数器增量

生成数字：

请注意，我将您的

更改为

，因为这是一个有序列表，无论您是否使用

列表样式

在文本和数字之间画一条小虚线需要更多的工作，但是你可以通过添加一些额外的
span
元素并使用css
display:table来实现这一点和
显示：表格单元格要正确布置它们，请执行以下操作：

<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>

将
span.line
元素上的宽度设置为100%，而不设置任何宽度将强制其填充所有剩余空间（这是因为
表格单元格
显示元素不允许断开为新行，并防止内容溢出）

添加额外的
span
元素不是最干净的方法，但这是一项有点棘手的任务。也许其他人能够花时间去想一个更有效的方法来完成它？您总是可以在整个
下加一条下划线，跳过额外的标记，但代价是稍微不那么酷。
看起来这是CSS规范新工作草案的一部分：


我怀疑是否有任何浏览器支持…
这是针对目录的（如在用户指南的开头），因此需要出现章节的页码。我在原来的问题中增加了一个示例部分，可以更好地说明这一点。谢谢：）你正在寻找这样的东西-不幸的是，据我所知，目前只支持这个。
ol {
    counter-reset: list-counter;
}
li:after {
    counter-increment: list-counter;
    content: counter(list-counter);
    float: right;
}

<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%;
}