所有文章是按照以前自己博客發(fā)布順序轉(zhuǎn)移的毛仪，本文成文較早排嫌，在行文的時(shí)候有些錯(cuò)誤契讲，偽類≠偽元素兩者還是有差異的仿吞，當(dāng)時(shí)發(fā)現(xiàn)這個(gè)錯(cuò)誤的時(shí)候我只是修改了題目，文章內(nèi)容沒有修改捡偏。姑且這么看吧唤冈。
提到偽類估計(jì)大家第一個(gè)在腦海中想起來的就是:hover,我們經(jīng)常<a>上設(shè)置。能實(shí)現(xiàn)比較炫鼠標(biāo)交互的效果银伟。其實(shí):hover也能作用于其他元素你虹，例如在<div>上設(shè)置就能讓鼠標(biāo)在經(jīng)過時(shí)候發(fā)生改變⊥埽可以試下一下傅物。
div{
width: 50px;
height: 50px;
background-color: blue;
}
div:hover{
background-color: red;
}
這個(gè)不是今天說的重點(diǎn)，今天要說的是偽類:before和:after琉预，關(guān)于這倆哥們剛開始的時(shí)候我還真是小瞧了他們董饰，后來我還是逐漸重視它們起來。廢話不說國(guó)際慣例先來介紹瀏覽器的支持情況圆米。
所有的瀏覽器都支持卒暂，下面來說下它們的作用。:before和:after會(huì)在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素娄帖，最基本的用法如下：
div:before {
content: "這里是添加的開頭#####";
color: red;
}
div:after {
content: "$$$$$$這里是添加的結(jié)尾";
color: red;
}
這樣就在div前面和后面添加了我們?cè)?code>content里面設(shè)置的東西介却。需要注意的是content可以為空，即content:"";但是不能不設(shè)置块茁，否則偽類無效齿坷。由于插入的內(nèi)容默認(rèn)是一個(gè)行內(nèi)元素，并且在HTML源代碼中無法看到（這就是為什么稱之為偽類的原因）数焊，所以也就無法通過DOM對(duì)其進(jìn)行操作永淌。并且偽類元素也會(huì)像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體佩耳、顏色等遂蛀。我們的content里面不只能插入文本，還可以指定其他內(nèi)容干厚，例如圖片等李滴。
p:before,p:after{
content: url("1.jpg");
}
a:after {
content: attr(href);
}
<p>我是P標(biāo)簽螃宙，由于:before和:after我前后都會(huì)有圖片</p>
<a >我是A標(biāo)簽因?yàn)?after我的后面會(huì)跟上我的鏈接地址</a>
很神奇是吧，發(fā)揮想象力吧所坯！了解了:before和:after是不是有點(diǎn)要做什么的沖動(dòng)谆扎？它們能應(yīng)用的地方有很多。例如比較難搞的浮動(dòng)float,我們都知道如果在一個(gè)元素內(nèi)部的子元素設(shè)置了浮動(dòng)芹助，為了讓子元素能將父元素給“撐”起來堂湖，那么必須在父元素的結(jié)束標(biāo)簽前面需要設(shè)置清除浮動(dòng)clear:both，老辦法就是新建一個(gè)div然后引用浮動(dòng)的類状土。這樣會(huì)多一個(gè)毫無意義標(biāo)簽不說无蜂，在javascript操作子元素的時(shí)候還會(huì)出現(xiàn)莫名的BUG。
//偽類清楚浮動(dòng)
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 */
.clearfix {
zoom:1;
}
在設(shè)置浮動(dòng)的父元素的上引用.clearfix就能實(shí)現(xiàn)清楚浮動(dòng)蒙谓，很方便是吧斥季。為什么里面會(huì)有display:table;？因?yàn)檫@樣設(shè)置的:before和:after會(huì)作為塊級(jí)表格來顯示（類似）累驮，表格前后帶有換行符酣倾。這樣就能確保萬無一失了。另外zoom:1;會(huì)在IE6/7瀏覽器下形成BFC區(qū)域以此來實(shí)現(xiàn)清除浮動(dòng)慰照。開下腦洞吧:before和:after還能實(shí)現(xiàn)更神器的效果。比較經(jīng)典的例子就是用偽類實(shí)現(xiàn)八卦圖了琉朽，下面放出代碼：
#Gossip {
width: 96px;
height: 48px;
background: snow;
border-color: #444;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#Gossip:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: snow;
border: 18px solid #444;
border-radius: 100%;
width: 12px;
height: 12px;
}
#Gossip:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #444;
border: 18px solid snow;
border-radius:100%;
width: 12px;
height: 12px;
}
