CSS Content 属性妙用

原文作者：CHRIS COYIER

译者：UC 国际研发 Jothy

----

CSS 中有一个 content 属性，可与 ::before 和 ::after 伪元素搭配使用，来将内容注入到元素中。

下面是一个例子：

该属性通常会获取你传入的所有内容。 但是，也有一些无效值是它不接受的。 我最近听说有人对此感到困惑，所以我自己也玩了一下，并学到了一些东西。

这个正常运行：

......但这不行：

我不是很确定为什么，但我猜这是因为 1 是无单位数（即 1 对1px）而不是字符串。 你骗不到浏览器的！ 我试着像这样耍了点小聪明：

你可以从属性中输出数字，就像你所猜测的：

但是，当然，你绝不会将生成的内容用于价格等重要信息，对吧？！ （请不要这样做。这样不怎么可行，文本也不可行。）

即使你可以获得并显示该数字，它终究只是一个字符串。 你无法真正用它做任