以前知道僞類和為元素，但是沒有真正去研究過，今天我主要總結了一下僞元素中的::before 和 ::after 的一些用法，通過這兩個為元素來認識一下其他的為元素！
一、什麼是僞類，什麼是為元素
① 僞類 僞類對元素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者内容；原則上特征是不可以從文檔樹上推斷得到的。在感覺上僞類可以是動态的，當使用者和文檔進行互動的時候一個元素可以擷取或者失去一個僞類。例外的是":first-child"能通過文檔樹推斷出來，":lang"在一些情況下也在從文檔樹中推斷出來
僞類有： :first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first
② 僞元素 僞元素是創造關于文檔語言能夠指定的文檔樹之外的抽象。例如文檔語言不能提供通路元素内容第一字或者第一行的機制。僞元素允許設計師引用它們，否則這是難以辦到的。僞元素還提供樣式設計師給在源文檔中不存在的内容配置設定樣式（例如：:before和:after能夠通路産生的内容）。
僞類有： :first-line，:first-letter，:before，:after css3中為了區分僞類和為元素，經常在僞類前加雙冒号（例如：::before 與 :before無差别）
二、僞元素 ::before 和 ::after
1.最基本效果
HTML：
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果</a>
css：
a::before{
content:"#";
}
a::after{
content:"@";
}
結果：
2. 清除浮動
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear-fix {zoom: 1;}
.clear-fix:after{ display:table; content: ""; width: 0; clear: both; }
</style>
</head>
<body>
<div class="clear-fix">
<p class="pa">浮動元素</p>
</div>
</body>
</html>
3. 配合CSS3 産生特效 看過一個創意特效網站 這個非常有意思的介紹創意連結特效的頁面，裡面驚人的效果大量使用到的特性除了 transform 屬性進行變形之外，就是這兩個僞元素了 例如這種效果：
除了簡單的添加字元，配合 CSS 強大的定位和特效特性，完全可以達到給簡單的元素另外附加最多兩個容器的效果。有一點需要注意的是，如果不需要内容僅配合樣式屬性做出效果，内容屬性也不能為空，即 content:”" 。否則，其他的樣式屬性一概不會生效。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
a {
position: relative;
left:20px;
top:20px;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before{content: "";position:absolute;left:10px;transition:0.3s linear all;}
a::after{content: "";position:absolute;right:10px;transition:0.3s linear all;}
a:hover::before, a:hover::after { position: absolute; color:red;font-weight:bolder;}
a:hover::before { content: "\5B"; left: -15px; }
a:hover::after { content: "\5D"; right: -15px;}
</style>
</head>
<body>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果1</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果2</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果3</a>
</body>
</html>
好了，我總結的為元素就這麼多，文章以後可以能會有些改動，也歡迎讀者多加指點。