CSS 的 content 屬性與應用

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: 要如何累進，可填正數或負數

利用這個我們來把列表前面加上數字：

.wrap{
  counter-reset: count;
}
.wrap div::before{
  counter-increment:count; 
  content:counter(count) '. ';
}

6. CSS 變數
這裡我們把第一個範例的名字變成 css 的變數，用法如下：

還有一個很經典的就是利用 content 製作 clearfix，就是利用空的內容來產出 clear: both 的內容。

用 css 的 content 大多會搭配偽元素，用得好的話是可以讓你的 css 變得更有彈性，有興趣的朋友可以玩玩看。