问题缘起
在闲看别人网站时发现了这样的代码
<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()