關於偽類元素:before和:after
CSS中存在一些比較特殊的屬性，稱之為偽類，它們之中最常用的就是定義鏈接的偽
:link：未被訪問狀態
:visited：已被訪問狀態
:hover：鼠標懸停狀態
:active：活動狀態
除了它們，還有一些不被常使用的偽類，有:focus，:first-child，:lang等。
:focus：選擇器用於選取獲得焦點的元素。
:first-child：某個標簽的第一個元素，例：li
:last-child：某個標簽的最后一個元素。
而且CSS里不光有偽類，還有偽元素，比如：:first-letter，:first-line，:before和:after。
?本文中其它偽元素暫且不表，單說:after偽元素。
after顧名思義是在元素后面的意思，實質是在元素之后添加內容。
這個偽元素允許制作人員在元素內容的最后面插入生成內容，需要和content屬性一起使用，設置在對象后發生的內容。默認地，這個偽元素是inline行內元素，不過可以使用屬性 display 改變這一點。
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之后，才是有效的。
提示：偽類名稱對大小寫不敏感。
1、:before和:after簡例介紹
:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之后插入一個包含content屬性指定內容的行內元素，最基本的用法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
#pid:before {
content: "^^";
color: red;
}
#pid:after {
content: "!";
color: red;
}
</style>
</head>
<body>
<p id="pid">welcome to my home</p>
</body>
</html>
這段代碼會在#pid元素內容之前插入一個'^^'，以及在內容之后添加一個'!'，插入的行內元素是作為#pid的子元素，效果如下:
如果沒有content屬性，偽類元素將沒有任何作用。
但是可以指定content為空，插入的內容默認是一個行內元素，並且在HTML源代碼中無法看到，這就是為什么稱之為偽類元素的理由，所以也就無法通過DOM對其進行操作。
除了插入文字內容之外，還可以插入圖片等。
2、:before和:after驚人用法
在這里展示一個常用的場景，很多人寫過如下清除浮動的代碼：
<div id="container">
<div class="content-left">this is left content.</div>
<div class="content-right">this is right content.</div>
<div class="clear"></div>
</div>
對應的css代碼如下：
.content-left{
float: left;
width: 150px;
font-weight:bold;">red;
}
.content-right{
float: right;
width: 450px;
font-weight:bold;">yellow;
}
.clear{
clear: both;
}
為了清除上面的浮動，多添加了一個<div>元素，並給此<div>元素添加了clear樣式，這種做法破壞了HTML5的語義化原則，因此應對css樣式進行修改，添加如下代碼：
.clearfix{
zoom: 1;
}
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
}
只要在父容器上應用clearfix這個類即可實現清除浮動。。。
轉自： http://www.cnblogs.com/smswei/p/5223496.html