after和 before炫酷用法總結

引入

提到偽類，在我的印象中最常用的不過是:hover、:active、:link、:visited，還有css3裡的常用偽類選擇器:last-child、:first-child、nth-child(n)等等，說實在其他的我發現"然並卵"。

從學習偽類，不小心又延伸到了偽類元素（eg.我們常見的::before和:hover之間為什麼缺少了乙個冒號呢?），那什麼又叫偽類元素？偽類和偽類元素有什麼區別？下面就跟著我一起來學習一下吧o(∩_∩)o~有說的不對的地方歡迎批評指正！~

w3c上對偽類和為元素的定義分別為,　　

css3為了明確偽類和偽元素的區別，已經明確了單冒號(:)用於css3偽類，雙冒號(::)用於css3偽元素

span:hover //偽類 span::before //偽元素

但是，為了保證相容性，現在偽元素普遍還是使用單引號。下面我將用單引號的形式給大家做介紹~

常見的偽類（pseudo-classes）和偽元素（pseudo-elements）

偽元素的相容性

定義

:before 選擇器在被選元素的內容前面插入內容。

:after 選擇器在被選元素的內容後面插入內容。

使用

使用 content 屬性來指定要插入的內容。　　

content有幾個比較有用的值：

a:after

a:after

一些實用的小圖示、小圖形

這些圖示都是可以利用偽元素做出來的喲！~不用再引用麻煩的bootstrap圖示了，還得引入他們的一堆檔案惹，真麻煩~ (￣～￣) ~真矯情

demo

（實用小圖示的源css**都在這裡面喲！）

還有3d的ribbons，不用也可以呢！只要只相容ie8+就可以用啦，everybody loves ribbons,so do i. 時常覺得css真心是藝術~

demo

（ribbon原始碼）

怎樣作為列表序號呢？我先舉個栗子~

現在我們可以用偽元素來做列表序號，而且列表的一項刪除了以後，其他的列表序號會自動改變，成為乙個有順序的列表~484很方便！

不過這裡需要乙個用到content的乙個屬性，那就是counter()。對於couter又是乙個知識點，後期可以進行深入了解，這裡找到了乙個相關的有用博文，請戳

~作為文字提示~在這裡我就不贅述啦

demo

這些導航真的很炫酷，除了很多css3的效果外，很多效果都用到了:before和:after偽元素~有空的時候一定要乙個個做做試試看！

demo

對於偽元素的應用上還有很多值得人去探尋的東西，我提到的估計也不過是冰山一角，小小的偽元素竟然能實現那麼多的功能~看來需要學的還有很多。

另外一篇相關博文：