html - 使用非正统的 `head {display: block}` 向用户显示文本？

Question

以下示例表明，通过使用 CSS 伪元素，您可以将一些“嵌入”在 <link> 中的可视文本呈现到浏览器中。或 <meta>标签。

http://codepen.io/SitePoint/pen/KporNg

这种不寻常的技术会在页面上显示文本，但文本似乎不可选择(至少在 Chrome 49 中是这样)，我的问题是，以这种方式显示的文本是否可抓取？ ……我的意思是:

1. 屏幕阅读器如何看到此文本？

2. 蜘蛛怎么看这个？ ... 比如 googlebot？是吗？

Answer 1

这应该有助于回答您的问题:http://www.sitepoint.com/is-generated-content-actually-content/

根据作者的指示:

Generated content is not content at all, it’s presentation.

我假设由于从伪元素生成的内容是表示的一部分，而不是页面的结构，蜘蛛程序/机器人可能不会拾取它。

一个简单的例子 fiddle和代码位:

.text:before  {
   content: "Hello World!";
}

也支持这个说法。如果您检查元素并检查 div，您会注意到“:before”是在 html 中显示的内容，而不是伪元素文本的直接输出(即:“Hello World!”)。由于大多数机器人不会扫描样式表，因此它很可能不会被拾取。

关于屏幕阅读器，我认为这取决于阅读器的类型以及它要解释的内容。这是一个有趣的链接，来自一个名为 WebAim 的流行阅读器，它似乎也解释了部分 CSS:http://webaim.org/techniques/css/invisiblecontent/唯一可以确定的方法是亲自测试并查看，但正如上面一位评论者所说，我不相信屏幕阅读器是标准化的。