問題緣起
在閒看別人網站時發現了這樣的程式碼
<span class="hamburger icon" data-icon="C">
.icon:before { content: attr(data-memory); display:block; }
感覺很新鮮，content的用法以前見過，但是content和attr連用還是頭回見。於是去查閱了一些資料。
解釋一下content和attr()
在CSS2.1中attr()已經被定義，它表示總是返回一個字串。
在CSS3中attr()可以返回多種不同的型別。
ie8以上均支援css2定義的attr，
在CSS2.1中可以這樣使用：
示例程式碼：
div:after{content:attr(title);}
【註明：寫本文件時尚無瀏覽器支援CSS3定義的attr()】
content一般和:before,:after一起使用，用來生成內容(img和input沒有該屬性)，content的內容一般可以為以下四種：
none： 不生成任何值。
attr： 插入標籤屬性值
url： 使用指定的絕對或相對地址插入一個外部資源（影象，聲頻，視訊或瀏覽器支援的其他任何資源）
string： 插入字串
content和attr()配合使用
attr屬性通常和自定義屬性data-配合使用，因為傳統的其它屬性雖然也能存值，但通常不適合存放表達性文字。
示例程式碼：
<div data-line="1"></div>
div[data-line]:after { content: attr(data-line);/* 屬性名稱上不要加引號！ */ }
額外內容
偽元素和偽類是非常相像的兩個東西。在實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
:Pseudo-classes
::Pseudo-elements
但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該儘可能養成好習慣，區分兩者。
參考文獻：
1.CSS3中的content和attr的用法
2.CSS3/CSS2 函式取值attr()