原文作者：Colin McDermott
个人翻译，如有错误，欢迎指正。
「CSS 可以通过伪元素向网页添加文本内容，作者做了一个实验，看看谷歌会不会索引 CSS 引入的文本」
传统上来说，当谷歌（或其他搜索引擎）对基于文本的内容进行索引时——他们希望直接能在提供给他们的网页HTML中找到这些内容。
随着一些网站使用JavaScript提供从小块内容或提供整个网站内容这种模式的兴起，这种情况有所改变。
谷歌被迫投入资源，试图尽可能有效地呈现和索引给予JavaScript的内容。
CSS伪元素
但是如何考虑纯粹来自CSS的文本内容呢？我们知道可以使用CSS伪元素（例如::before和::after）与CSS content属性结合向页面添加内容。
看看下面的简单示例：
<p>99 bottles of beer on the wall, 99 bottles of beer.</p>
p::after {content:' Take one down and pass it around, 98 bottles of beer on the wall.'}
将会呈现这样的内容：
99 bottles of beer on the wall, 99 bottles of beer. Take one down and pass it around, 98 bottles of beer on the wall.
年复一年，随着CSS变得更加先进并引入其他功能，例如仅使用CSS进行数学计算或计算元素的能力，开发人员和设计师采用这些功能的可能性将会变高。
但是谷歌能够呈现和索引折现内容吗？在CSS中写入的文本会出现并可以被Google搜索到吗？
使用CSS呈现文本是最佳选择吗？
在我们开始之前，需要注意的是，在大多数情况下，出于各种原因，使用CSS伪元素和content属性（而不是HTML）在网页上显示任何大量基于文本的内容，绝对不是最佳选择。其缺点包括：
- 用户无法选择文本，这意味着它无法突出显示或进行复制粘贴。
- 屏幕阅读器将忽略文本——这将使内容无法访问并违背了可访问性手册。
F87: 由于使用
:before和:after伪元素，以及CSS中的content属性插入非装饰性元素，将会导致成功标准1.3.1失败。
CSS伪元素一般来说应该只用于页面内容中一些不重要的装饰元素。
SEO优化调查
在撰写本文之前，我无法找到任何有关于此主题的与SEO相关的文章，因此我认为深入研究可能会很有趣，于是我进行了此项实验。
我在Twitter民意调查中询问了SEO社区他们的想法，结果如下：
剔除只想看结果的用户，选择「否」和「我不知道」的用户获得相同数量的选票，选择「是」的用户票数相对较少。
实验
为了进行测试，我创建了一个不包含标准HTML内容的页面，并使用CSS伪元素附加到标题、段落、div和链接标签上——这些都来自于外部的CSS文件。
你可以在此处查看CodePen上的代码和结果页面。
渲染
为了进行测试，我还使用搜索console中的Fetch工具和Mobile Friendly测试工具运行了该页面。
两者都表明Google能够完全呈现页面上普通用户所看到的CSS内容
结果
最终（有点出乎我的意料）该页面确实在Google中被编入索引。
然而，在谷歌中检查结果列表，并从页面搜索文本字符串后——很明显，没有实际内容被索引到。
所以我们可以确认，标题的答案是：否——尽管谷歌可以呈现它，但是基于CSS的内容目前不会在谷歌中被编入。
目前来讲，如果您使用的CSS伪元素和CSS content属性在您的网站上包含文本内容，那么谷歌无法为文本内容编制索引。
更新（2021/7/14）
Jess Peck提醒我注意她之前对同一个主题进行的测试。以及Mathias Bynens的另一篇文章/实验：它根本不使用任何HTML。
