CSS生成内容
在Web中插入内容，在CSS2.1時代依靠的是JavaScript來實現。
但進入CSS3進代之後我們可以通過CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來實現，其關鍵是依靠CSS3中的“content”屬性來實現。
不過這個屬性對於img和input元素不起作用。
content配合CSS的偽類或者偽元素，一般可以做以下四件事情：
| 功能 | 功能說明 |
| none | 不生成任何内容 |
| attr | 插入標簽屬性值 |
| url | 使用指定的絕對或相對地址插入一個外部資源（凸顯、聲頻、視頻或瀏覽器支持的其他任何資源） |
| string | 插入字符串 |
在CSS中有一種清除浮動的方法叫“clearfix”。
而這個“clearfix”方法就中就使用了“content”，只不過只是在這裡插入了一個空格。如下所示：
.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}上面這個示例是最常見的，也是最簡單的，我們再來看一個插入元素屬性值的方法。
假設我們有一個元素：
<a href="##" title="我是一個title屬性值，我插在你的後面">我是元素</a>
可以通過”:after”和”content:attr(title)”將元素的”title”值插入到元素内容“我是元素”之後：
a:after {
content:attr(title);
color:#f00;
}效果如下：
