CSS中的content和attr的用法

问题缘起

在闲看别人网站时发现了这样的代码

<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()