normal | none normal為預設，使用這兩個值不會有任何效果出現。
<string> 值為字串，會在之前或之後加入該字串。因為放的是文字，所以可以針對文字作顏色、字體、大小的變換
p:after { content: “我會在文字後”; font-size: 2em; color: purple;}
<url> 可以在之前或之後加入圖片、聲音或影像等
p:before { content: url(w3css.gif);}
<counter> 可以自動計數連續固定標籤
如：可以在數個連續的 p 之前自動計算其順序數值，也可以運用在 ul li 之前p{ counter-increment: num}p::before{ content: counter(num) }
attr(<identifier>) 可以在所選元素之前或之後插入指定屬性的值。注意這時候 content 不需要 ”符號
.menu li::before{ content: attr(href)}
open-quote | close-quote 給予開始、結束的引號 “ “，大家應該有看過網頁上有很大的引號，用來做裝飾的，就可以用這兩個值來完成唷～
p:before { content: open-quote;}p:after { content: close-quote;}p:before,p:after{ font-size: 3em; color: #ccc;}
no-open-quote | no-close-quote 在有引號的區段內的指定元素，取消其引號
<p>My name is Iris 這一段會有引號</p><p class=”hometown”>這一段不要引號</p><p>這一段會有引號</p>p:before { content: open-quote;}p:after { content: close-quote;}p.hometown:before { content: no-open-quote;}p.hometown:after { content: no-close-quote;}
inherit 會繼承前一個的屬性
還可以這樣使用
想要在文字前加上獨立區塊的小圓，讓 content 的值為空，再用寬高做出需要的小圓
.menu li::before{ content: ”; width: 10px; height: 10px; display: block;//因為 ::before 是 inline 元素，所以需要將它變成 block background: #f00; border-radius: 5px;}更複雜的用法，可以替主元素加上相對定位，而 ::before 或 ::after 加上絕對定位，就可以做出各種想要的效果出來了。試玩範例以上是 偽元素 與 content Property 的使用方式。各位看倌明天見囉～