偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染CSS的時候畫上去的，所以在瀏覽器檢視元素上是看不到偽元素的HTML結構的。

before 和 after 顧名思義就是附著在元素前後的偽元素。

預設情況下偽元素是行內顯示的，想讓它呈現出不同的效果的話，就需要設定它為塊 {display:block} 顯示。

偽元素可以使用content屬性去指定元素的內容。

1."string" 字串

li::after {content: '/';}

　　"string" 字串內容會直接顯示在頁面當中，如果你字串中填寫html標籤的話是不會被解析的。

2.attr() 

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

　　attr() 它可以呼叫當前元素的屬性進行顯示

3.url

li::after { content: url(bg.png)}

　　url 用於引用圖片，或是 css 漸變屬性。

4.counter 呼叫計數器

li::before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

　　counter 呼叫計數器，可以不使用列表元素實現序號功能。