css - 有没有办法在打印媒体中将链接显示为脚注？

Question

我知道你可以 put link URLs directly after the link itself ，但有没有办法在页面底部执行此操作？

如果我有一个看起来像这样的页面:

<p>Check <a href="http://example.com">here</a> and <a href="http://example.net">here</a> for more information.</p>

我可以使用上面的 CSS 技巧使打印版本看起来像这样:

Check here (http://example.com) and here (http://example.net) for more information.

有没有办法让它看起来像这样？

Check here[1] and here[2] for more information.

[1] http://example.com
[2] http://example.net

Answer 1

如果您知道链接的数量，就可以实现您想要的效果。假设您的部分中有三个链接。

section {
  counter-reset: links;
  position: relative;
  padding-bottom: 4em;
}

section a {
  counter-increment: links;
}

section a::after {
  content: "["counter(links)"]";
}

section a::before {
  content: " ["counter(links)"] "attr(href);
  position: absolute;
  left: 0;
}
    
section a:nth-of-type(1)::before {
  bottom: 2em;
}

section a:nth-of-type(2)::before {
  bottom: 1em;
}

section a:nth-of-type(3)::before {
  bottom: 0em;
}

<section>
  <a href="first.htm">Here's</a> your <a href="second.htm">text</a> containing <a href="third.htm">three links</a>.
</section>

注意:在多页的长文本中，您可能会得到意想不到的结果。但是您可以将文本分成多个部分。当然，您的 CSS 代码会随着每个新链接而增加...