如何只在用户打印时显示内容？

Question

我所知道的

现在我知道如何在网页中添加打印样式表来设计打印布局。它类似于：

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

但我不希望如此。

在this blog转到任何文章或发布并打印预览页面（使用谷歌浏览器）。现在，如果您沿着页面向下（在保存PDF模式下），您将看到附加的文本是（这个故事最初发布在Digital Inspiration .. ..这个打印机友好版本可用于您的个人和 仅限非商业用途）。只有在打印（-preview）时才会看到该消息，而不是正常在网页上。

我试图找出

当我查看页面的页面来源时，只有只有两个样式表，其中一个是main，另一个是webfont。对于JavaScript，只附加了一个主要的JavaScript文件，其余用于webfont，CSS3 MediaQueries，HTML5-Shiv以及我不怀疑包含任何打印相关内容的广告。当我尝试找到主要的CSS和JavaScript文件（使用 CTRL - F 功能）时，搜索打印机友好与任何内容都不匹配

我没有尝试过什么

我没有问网站老板他是怎么做的，也没有问过;）

问题

他是怎么做到的？这是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;
}

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

Answer 2

您可以使用伪元素:after或:before将文字附加到打印样式表上，或者只需使用display: none;将该元素添加到您的网页，然后更改其display打印样式表上的block。