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

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

XML/HTML Code復制內容到剪貼板

<h1>這是h1</h1>  
<h2>這是h2</h2>  

css

CSS Code復制內容到剪貼板

h1::after{   
    content:"h1后插入內容"  
}   
h2::after{   
    content:none  
}  

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

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

CSS Code復制內容到剪貼板

h1{   
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號*/  
}   
h1::before{   
    content:open-quote;   
}   
h1::after{   
    content:close-quote;   
}   
h2{   
    quotes:"/"" "/"";  /*添加雙引號要轉義*/  
}   
h2::before{   
    content:open-quote;   
}   
h2::after{   
    content:close-quote;   
}  

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

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

XML/HTML Code復制內容到剪貼板

<h3>這是h3</h3>  

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:

XML/HTML Code復制內容到剪貼板

<a href="http:///www.ido321.com">這是鏈接  </a>  

css:

CSS Code復制內容到剪貼板

a:after{   
    content:attr(href);   
}  

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

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