我們知道，css偽元素包括after,before,first-letter等，通過合理的利用偽元素，我們可以讓我們的結構更簡潔。
通常寫法如p::after,其中content內容可以是字元也可以是，例如p:before，p:after ，我們最常用的可能是用來清除浮動或新增一些簡單的元素（如div首尾內容等）。
今天來總結一下其他的幾種用法：
以下**全部針對谷歌瀏覽器，如需針對其他瀏覽器，需用相容性寫法
一.常見訊息框
假如我們要實現這樣的效果要怎麼做？用嗎？no！
我們知道當設定元素寬高都為0px時，設定4條border為不同顏色，將會是這個樣子
所以我們可以利用這個特性來製作上面的內容：
122注意，此時偽類content:' ',而非content:'',而且偽類4條邊必須寬度相同，而且其他三條邊為transparent才可以;對於-webkit-transform設定在之前的文章中已經講過，可以通過設定定位元素left,top值為50%,translate(-50%,-50%) 來使任意寬高的元素居中。23 我是內容我是內容我是內容
ps：當然我們也可以通過定位疊加來實現有邊框有底色的小三角。
二.陰影
先看下圖，通過偽類，我們可以實現如下效果，而不用再用
我們來看**：
140通過設定before，after不同位置，不同旋轉角度，可以實現現在網路很流行的陰影效果，同時要保證偽類的顏色及z-index。有了這種方法 我們就可以擴充套件出各種各樣的陰影效果，同理**疊加效果也是類似，自己動手試驗一下吧。4142
我是內容我是內容我是內容
4344
CSS before after 偽類選擇器
css before after 偽類選擇器 所有主流瀏覽器都支援 after 選擇器。注釋 對於 ie8 及更早版本中的 after，必須宣告 before 語法 selector before 說明 用來和content 屬性一起使用，設定在物件前 依據物件樹的邏輯結構 發生的內容。after ...
偽元素 偽類
偽元素在dom中建立了一些抽象元素，而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用 兩個冒號 比如 使用在使用 before 和 after時，要使用content進行內容設定。預設情況下，偽元素插入的內容為行內元素，不過可以使用display進行設定。注意 同時只能使用乙個偽元素...
偽類 偽元素
偽類和偽元素在web開發中用的好的話，可以說猶如神助。但一定要分清楚，什麼是偽類，什麼是偽元素。如何區分偽元素與偽類？答 偽元素在html文件渲染後，頁面中有相應的內容顯示，同時能夠設定它的樣式，而偽類只能設定樣式 偽元素和元素的區別？答 很明顯，從字面意思上來說，偽元素就不是真正的元素，而只有形而...