站长之家（ChinaZ.com）:传统上，当谷歌（或其他搜索引擎）寻找基于文本的内容来索引时，他们希望能直接在所提供网页的HTML中找到这些内容。
随着越来越多的网站开始使用JavaScript来服务局部内容，并逐渐应用到整个网站，这种情况有所改变。
谷歌被迫投入资源，试图尽可能有效地呈现和索引基于JavaScript的内容。
CSS 伪元素
那么纯粹使用CSS的文本内容是怎样的呢?（站长之家注:CSS伪元素是用来添加一些选择器的特殊效果，例如可用于:设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容等情景。）
比如使用CSS伪元素（如::before和::after）结合CSS content属性向页面添加内容。下面是一个简单的例子，在一段文字分别采用了HTML和CSS样式。
前半句采用HTML语言:
<p>99bottlesofbeeronthewall，99bottlesofbeer.</p>
后半句采用CSS语言：
p::after{content:'Takeonedownandpassitaround，98bottlesofbeeronthewall.'}最终展示效果为:
99bottles of beer on the wall，99bottles of beer. Take one down and pass it around，98bottles of beer on the wall.
随着CSS变得越来越先进，并且引入了其他功能，例如只使用CSS进行数学计算或计算元素的能力，开发人员和设计人员采用这些功能的可能性变得更高。
文本中使用CSS是最佳做法吗?
但是谷歌能够呈现和索引这些内容吗?在CSS中找到的文本会出现并在谷歌中搜索到吗?在文本中使用CSS是最佳做法吗?
需要注意的是，在大多数情况下，使用CSS伪元素和'content'属性（而不是HTML）来显示网站上的大量文本内容绝对不是最佳做法，原因有很多，包括:
用户不能选中文本，这意味着它不能被突出显示或复制/粘贴
文本将被屏幕阅读器忽略，使内容难以访问，并违反可访问性准则。
一般来说，CSS伪元素一般只应用于装饰元素，这些元素对页面上的内容的使用是不必要的。
测试
为了能明确知道CSS伪元素在谷歌呈现和索引效果，国外程序员（Colin McDermott）执行一个测试。
Colin 通过创建了一个包含零标准 HTML 内容的页面，并使用CSS 伪元素添加了文本内容——包含标题、段落、div和链接标签的部分。
如果你想了解完整代码和结果页面，可以点击这里查看。
谷歌呈现的效果
为了进行测试，Colin 还通过谷歌站长工具Search Console 中的 Fetch 工具和 Mobile Friendly测试工具运行了该页面。
两者都表明 谷歌能够完全呈现页面上普通用户看到的 CSS 内容。
CSS伪元素索引结果
最终，尽管完全缺乏内容，该页面还是在谷歌上建立了索引。
然而，查看谷歌结果列表，并从页面中搜索文本字符串后，很明显没有实际的内容被索引。
总结:
因此，我们可以从这个测试中确认:虽然谷歌可以呈现CSS伪元素效果，但基于CSS的内容目前不会被谷歌索引。
也就是，如果你在的网站上使用CSS伪元素和CSS“content”属性上包含文本内容，谷歌目前不可能对这部分文本内容进行索引。
站长之家注:Colin McDermott完整的测试过程可点击这里查看他分享的原文内容。
（举报）