原文作者：CHRIS COYIER
译者：UC 国际研发 Jothy
----
CSS 中有一个 content 属性，可与 ::before 和 ::after 伪元素搭配使用，来将内容注入到元素中。
下面是一个例子：
该属性通常会获取你传入的所有内容。 但是，也有一些无效值是它不接受的。 我最近听说有人对此感到困惑，所以我自己也玩了一下，并学到了一些东西。
这个正常运行：
......但这不行：
我不是很确定为什么，但我猜这是因为 1 是无单位数（即 1 对1px）而不是字符串。 你骗不到浏览器的！ 我试着像这样耍了点小聪明：
你可以从属性中输出数字，就像你所猜测的：
但是，当然，你绝不会将生成的内容用于价格等重要信息，对吧？！ （请不要这样做。这样不怎么可行，文本也不可行。）
即使你可以获得并显示该数字，它终究只是一个字符串。 你无法真正用它做任何事情。
你不能使用数字，期限：
注意（敲黑板）！ 不要像在 PHP 或 JavaScript 中那样尝试拼接字符串：
规范中有一个东西可以将属性转换为实际类型，而不是把它们当字符串处理......
......但我非常确定它还没有在任何地方起作用过。 另外，它也不能帮助我们使用伪元素，因为字符串已经可以这样用了而数字却不行。
通过 email 与我联系的人不理解为什么他们无法对 content 使用 calc()。 我不确定在这种情况下我能帮你做数学运算，但是你值得知道伪元素是可以作为计数器的，并且那些计数器可以做有限的数学运算。 例如，这里是一个从 12 开始的计数器，对于 DOM 中该层级的每个元素递增 -2。
我们这里没有提到的另一件事是伪元素可以是一张图片。 例如：
更常见的是使用空字符串作为值（content: "";），它可以执行清除浮动之类的操作，但也可以定位，调整大小以及设置自己的背景。
英文原文：