CSS中有關這兩個僞元素，是用的比較頻繁的。而且它的用處較其它的僞元素還算是比較多，這裡講三個它的應用，希望能夠說明白它的用法。畢竟學會用法才是我們最終的目的。
一、字母拼接：
這是最簡單直接的應用了，就像在字符串"ello，worl"前後分别加個"H"和"d"，可以這麼處理：
<p>ello Worl</p>
上面這個DIV加個下面這種樣式：
結果就是我們想到的，輸出完整的"Hello,world"。
二、層級疊加：什麼叫層級疊加效果了，說直白點就是用after和before分别在一個div中定義兩個僞元素模塊，然後通過定位，将他們疊加在一起，形成我們想要的效果。
下面用這個思路來做一個類似的語言框，效果是這樣的：
對，我們要實現的就是左邊那個尖角。可以使用無寬高的單設置border來處理這種形狀。
<div class="wx"></div>
樣式代碼是這樣的：
這裡需要注意的是僞元素的定位是相對于本身這個div元素來的。知道了這一點，那下面的定位背景就是同一道理了。
三、定位背景：這裡同樣也是通過定位來給一個div加一個透明的背景層。效果是這樣的：
上圖的那個白色透明層，就是我們這裡要實現的效果。dom結構是這樣的：
然後，我們加上僞元素的樣式代碼：
寫在最後的總結：
僞元素的應用也許不止于這些，但是它們的使用方法我們還是可以總結的。希望這篇能讓大家有點啟發。
短内容，說完整事，哪怕隻讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
