原文作者：CHRIS COYIER
譯者：UC 國際研發 Jothy
----
CSS 中有一個 content 屬性，可與 ::before 和 ::after 僞元素搭配使用，來将内容注入到元素中。
下面是一個例子：
該屬性通常會擷取你傳入的所有内容。 但是，也有一些無效值是它不接受的。 我最近聽說有人對此感到困惑，是以我自己也玩了一下，并學到了一些東西。
這個正常運作：
......但這不行：
我不是很确定為什麼，但我猜這是因為 1 是無機關數（即 1 對1px）而不是字元串。 你騙不到浏覽器的！ 我試着像這樣耍了點小聰明：
你可以從屬性中輸出數字，就像你所猜測的：
但是，當然，你絕不會将生成的内容用于價格等重要資訊，對吧？！ （請不要這樣做。這樣不怎麼可行，文本也不可行。）
即使你可以獲得并顯示該數字，它終究隻是一個字元串。 你無法真正用它做任何事情。
你不能使用數字，期限：
注意（敲黑闆）！ 不要像在 PHP 或 JavaScript 中那樣嘗試拼接字元串：
規範中有一個東西可以将屬性轉換為實際類型，而不是把它們當字元串處理......
......但我非常确定它還沒有在任何地方起作用過。 另外，它也不能幫助我們使用僞元素，因為字元串已經可以這樣用了而數字卻不行。
通過 email 與我聯系的人不了解為什麼他們無法對 content 使用 calc()。 我不确定在這種情況下我能幫你做數學運算，但是你值得知道僞元素是可以作為計數器的，并且那些計數器可以做有限的數學運算。 例如，這裡是一個從 12 開始的計數器，對于 DOM 中該層級的每個元素遞增 -2。
我們這裡沒有提到的另一件事是僞元素可以是一張圖檔。 例如：
更常見的是使用空字元串作為值（content: "";），它可以執行清除浮動之類的操作，但也可以定位，調整大小以及設定自己的背景。
英文原文：
https://css-tricks.com/valid-css-content/