在Web中插入內(nèi)容，在CSS2.1時(shí)代依靠的是JavaScript來(lái)實(shí)現(xiàn)。但進(jìn)入CSS3進(jìn)代之后我們可以通過(guò)CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來(lái)實(shí)現(xiàn)，其關(guān)鍵是依靠CSS3中的“content”屬性來(lái)實(shí)現(xiàn)。不過(guò)這個(gè)屬性對(duì)于img和input元素不起作用。

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

實(shí)例展示：

在CSS中有一種清除浮動(dòng)的方法叫“clearfix”。而這個(gè)“clearfix”方法就中就使用了“content”，只不過(guò)只是在這里插入了一個(gè)空格。如下所示：

.clearfix:before,

.clearfix:after {

       content:””;

       display:table;

}

.clearfix:after {

       clear:both;

       overflow:hidden;

}

上面這個(gè)示例是最常見(jiàn)的，也是最簡(jiǎn)單的，我們?cè)賮?lái)看一個(gè)插入元素屬性值的方法。

假設(shè)我們有一個(gè)元素：

<a href="##" title="我是一個(gè)title屬性值，我插在你的后面">我是元素</a>

可以通過(guò)”:after”和”content:attr(title)”將元素的”title”值插入到元素內(nèi)容“我是元素”之后：

a:after {

  content:attr(title);

       color:#f00;

}

效果如下：