在Web中插入內容，在CSS2.1時代依靠的是JavaScript來實現。但進入CSS3進代之后我們可以通過CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來實現，其關鍵是依靠CSS3中的“content”屬性來實現。不過這個屬性對于img和input元素不起作用。

content配合CSS的偽類或者偽元素，一般可以做以下四件事情：

實例展示：

在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;

}

效果如下：