content 是一個可以用來無中生有的 CSS 屬性，這邊先來看一個簡單的例子：
.content::before{
content: "大家好";
}
.content::after{
content: "紅色死神";
}
這邊我們使用 ::before 跟 ::after，照字面看大概可以知道我們就是在指定的選擇器前後加上東西，而加上的就是我們自訂的文字內容，結果如下：
content 可以使用的值有以下幾種，不過我們也可以使用空的內容再去依據我們的需求生成 UI：
1. 文字
2. unicode
3. attr
4. url
5. counter 函數
6. css變數
2. unicode
剛才我們看過純文字了，接下來看 unicode，unicode 是瀏覽器內建的特殊符號，比如說這邊我們就用 \2103 來自動產生攝氏溫度的單位：
3. attr
<div class="content" data-weather="多雲時晴">現在天氣: </div>
再利用 css 去拿 data 裡的值
.content::after{
content: attr(data-weather);
}
結果如下：
4. url
url 可以直接去拿一個線上的內容，比如說圖片的網址
5. counter 函數
counter 是一個有趣的東西，我們必須先認識這些跟 counter 有關的屬性，也就是 counter-reset 跟 counter-increment
counter-reset: 自訂一個要當 counter 的變數，後面可以帶預設的值
counter-increment: 要如何累進，可填正數或負數
利用這個我們來把列表前面加上數字：
<div class="wrap"><div>蘋果</div><div>香蕉</div><div>柳丁</div></div>.wrap{
counter-reset: count;
}
.wrap div::before{
counter-increment:count;
content:counter(count) '. ';
}
6. CSS 變數
這裡我們把第一個範例的名字變成 css 的變數，用法如下：
還有一個很經典的就是利用 content 製作 clearfix，就是利用空的內容來產出 clear: both 的內容。
用 css 的 content 大多會搭配偽元素，用得好的話是可以讓你的 css 變得更有彈性，有興趣的朋友可以玩玩看。
