場(chǎng)景：
假如有一天，你的在寫一個(gè)前端項(xiàng)目，是關(guān)于一份點(diǎn)餐商家電話信息表，你啪塔啪塔地寫完了，突然間項(xiàng)目經(jīng)理跑過來找你，要求你在每一個(gè)商家的電話號(hào)碼前都添加一個(gè)電話符號(hào)，來使得電話號(hào)碼更直觀和頁面更美觀。這個(gè)時(shí)候你就糾結(jié)了，這不是折磨人嗎？這不是要我在每個(gè)電話號(hào)碼前都添加一個(gè)<img>標(biāo)簽？這要整到猴年馬月？搞不好還會(huì)出現(xiàn)標(biāo)簽浮動(dòng)的問題。
這個(gè)時(shí)候::after偽元素和::before偽元素就是救星了，在css中有這么兩個(gè)偽類，允許通添加偽元素在html元素前/后添加內(nèi)容。
這里我簡(jiǎn)單寫了一個(gè)demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.phone-number{
font-size: 14px;
font-weight: 600;}
.phone-number::before{
content: '\260E';
font-size: 22px;
color: red;
}
</style>
</head>
<body>
<div class='phone-number'> 13300000000</div>
<div class='phone-number'> 13300000001</div>
<div class='phone-number'> 13300000002</div>
<div class='phone-number'> 13300000003</div>
<div class='phone-number'> 13300000004</div>
</body>
</html>
實(shí)現(xiàn)的效果如下
每一個(gè)號(hào)碼都有一個(gè)class屬性，我只需要對(duì)這個(gè)class屬性寫一次css渲染層和添增上
:: before偽元素就可以實(shí)現(xiàn)這個(gè)功能了。顯然這比一個(gè)個(gè)添加<img>標(biāo)簽要輕松得多。
可能有人會(huì)問，這個(gè)的符號(hào)是怎么來的？html官方規(guī)定了一些特殊符號(hào)的unicode碼，具體可以看http://www.cnblogs.com/starof/p/4718550.html。
下面是:: before偽元素和:: after偽元素的具體用法和使用規(guī)則
（1）content:’()’
作用：在標(biāo)簽前/后添加字符串
使用規(guī)則：content后面一定要用‘’把要添加的內(nèi)容括起來，否則是無法顯示的（括號(hào)不一定需要添加）。
例如：
在<p>￥80元</p>之后添加如下css裝飾代碼：
p::after{
content:'門市價(jià)100元';
font-size: 14px;
text-decoration: line-through;
color: grey;
}
（2）content:url(‘圖片地址’)
作用：在標(biāo)簽前/后添加圖片（圖片通過網(wǎng)絡(luò)url實(shí)時(shí)加載）
使用規(guī)則：必須用url()引入需要添加的圖片，道理跟background的設(shè)置一樣。圖片的地址也需要用‘’括起來。
例如：
在
<div id='yidong-nub'>
<a > 10086</a>
</div>
添加css裝飾代碼
a::before{
content:url('http://www.10086.cn/images/index/logo.png');
}
（3）清除浮動(dòng)
::after{
content : '';
display:block;
}
用法是設(shè)置content的為空字符串
關(guān)于清除浮動(dòng)的一些可用方法有很多種，我在這里就不展開來說了。
有人可能會(huì)說，用法（1）在p標(biāo)簽后面添加內(nèi)容，直接在html代碼里面的p標(biāo)簽后面再增加一個(gè)p標(biāo)簽不就行了嗎？為什么還要用這種方法呢？
可以思考一下，通過在后面添加一個(gè)p標(biāo)簽，同時(shí)也需要用css代碼去裝飾這個(gè)新添加上去的標(biāo)簽。顯然，代碼量上，后者比前者多了，而且后者在html中新增了一個(gè)DOM節(jié)點(diǎn)，如果數(shù)量很多時(shí)，解析器在解析時(shí)難免會(huì)增加一定的時(shí)間。而前者沒有這種問題，而且還能更好實(shí)現(xiàn)表現(xiàn)層和樣式層的分離式開發(fā)。
最后值得知道的是，使用::before和::after偽元素這種添加內(nèi)容的方式，只是在css渲染頁面的時(shí)候添加上去的，在DOM節(jié)點(diǎn)上是查不到這些添加上去的內(nèi)容的。所以，一般不要添加實(shí)際的內(nèi)容。意味著除了文本內(nèi)容和圖片/icon之外的html標(biāo)簽是無法添加進(jìn)去的。
轉(zhuǎn)載自# ::before和::after偽元素的妙用
了解更多可點(diǎn)擊# ::before和::after偽元素的用法
