javascript - 如何仅在用户打印时显示某些内容？

Question

我所知道的

现在我知道如何在网页中添加打印样式表来设计打印布局了。它是这样的:

<link rel="text/css" href="/css/print.css" media="print" />

但我不想那样。

在this blog转到任何文章或帖子并打印预览页面(使用 Google Chrome)。现在，如果你向下浏览页面(在保存 PDF 模式下)，你会看到附加的额外文本是 (这个故事最初发表在 Digital Inspiration .. ..这个打印友好的版本可供您个人和 仅限非商业用途)。只有在打印(-preview)时才能看到该消息，而不是通常在网页上。

我试图找出什么

当我查看页面的源代码时，只有两个 样式表，其中一个是主样式表，一个是 webfont。对于 JavaScript，仅附加了一个主要的 JavaScript 文件，其余文件用于 webfont、CSS3 MediaQueries、HTML5-Shiv 和我不怀疑包含任何打印相关内容的广告。当我试图找到那些主要的 CSS 和 JavaScript 文件(使用 CTRL-F 功能)时，搜索printer friendly 没有匹配到任何内容.

我没试过的

我没有问网站所有者他是怎么做到的，也不会去问 ;)

问题

他是怎么做到的？这里涉及 JavaScript 吗？还是CSS？在 [noscript] 标签中，该标签内的文本仅在用户禁用 javascript 时显示。打印有相同的东西吗？像 [onlyonprint] 标签？

Answer 1

他正在使用 :after pseudo-element :

#content:after {
    content: "This story was originally published at Digital Inspiration...";
    font-size: 90%;
    font-style: italic;
    line-height: 1.5em;
    margin: 3em 0;
}

这存在于他的打印样式表中。