CSS中主要的偽元素有四個：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個content屬性，能夠實現頁面中的內容插入。
插入純文字

content:"插入的文章"，或者content:none不插入內容
html:

css

運行結果：
https://jsfiddle.net/dwqs/Lmm1r08x/
嵌入文字符號

可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。open-quote用于添加開始的文字符號，close-quote用于添加結束的文字符號。修改上述的css:

運行結果：
https://jsfiddle.net/dwqs/p8e3qvv4/
插入圖片

content屬性也可以直接在元素前/后插入圖片
html:

css:

h3::after{
content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

運行結果：
https://jsfiddle.net/dwqs/c6qk6pkv/
插入元素的屬性值

content屬性可以直接利用attr獲取元素的屬性，將其插入到對應位置。
html:

css:

運行結果：
https://jsfiddle.net/dwqs/m220nzan/
插入項目編號

利用content的counter屬性針對多個項目追加連續編號.
html:

css:

運行結果：
https://jsfiddle.net/dwqs/2ueLg3uj/
項目編號修飾

默認插入的項目編號是數字型的，1,2,3.。。。自動遞增，也能給項目編號追加文字和樣式,依舊利用上面的html，css修改如下：

運行結果：
https://jsfiddle.net/dwqs/17hqznca/
指定編號種類

利用content(計數器名，編號種類)格式的語法指定編號種類，編號種類的參考可以依據ul的list-style-type屬性值。利用上述的html，css修改如下：

運行結果：
https://jsfiddle.net/dwqs/4nsrtxup/
編號嵌套

大編號中嵌套中編號，中編號中嵌套小編號。
html:

css:

運行結果：
https://jsfiddle.net/dwqs/2k5qbz51/

在示例的輸出中可以發現，p的編號是連續的。如果對于每一個h1后的三個p重新編號的話，可以使用counter-reset屬性重置，修改上述h1的css:

這樣，編號就重置了，看看結果：
https://jsfiddle.net/dwqs/hfutu4Lq/

還可以實現更復雜的嵌套，例如三層嵌套。
html:

css:

運行結果：
https://jsfiddle.net/dwqs/wuuckquy/