偽類“:before”，“:after”和虛擬元素“::before”、“::after”-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;}

效果如下：