定義
偽元素顧名思義偽裝成元素，但不是元素，這與生成內容相關。生成內容主要指由瀏覽器創建的內容，而不是由標志或內容來表示。生成內容主要由:before和:after偽元素來實現，當然偽元素還包括:first-line,:first-letter和::selection
用法
:first-letter
指定一個元素第一個字母的樣式
[注意1]所有前導標點符號應與第一個字母一同應用該樣式
[注意2]只能與塊級元素關聯
[注意3]只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-letter中存在連接符的原因
div:first-letter{color: red;}
:first-line
設置元素中第一行文本的樣式
[注意1]只能與塊級元素關聯
[注意2]只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-line中存在連接符的原因
div:first-line{color: red;}
:before(IE7-瀏覽器不支持)
在元素內容的最開始插入生成內容
[注意]默認這個偽元素是行內元素，且繼承元素可繼承的屬性；IE7-瀏覽器中必須聲明!DOCTYPE，否則不起作用
div:before{content:"前綴"}
:after(IE7-瀏覽器不支持)
在元素內容的最后插入生成內容
[注意]默認這個偽元素是行內元素，且繼承元素可繼承的屬性；IE7-瀏覽器中必須聲明!DOCTYPE，否則不起作用
div:after{content:"后綴"}
::selection(IE8-瀏覽器不支持)
匹配被用戶選擇的部分
[注意1]firefox瀏覽器需要添加-moz-前綴
[注意2]只支持雙冒號寫法
[注意3]只支持顏色和背景顏色兩個樣式
div::selection{color: red;}
重點
【content屬性】
content屬性應用于before和after偽元素
content:normal;(默認) content:<string>|<uri>|attr(<identifier>)
【1】<string>里面的內容會原樣顯示，即使包含某種標記也不例外。
[注意1]如果希望生成內容中有一個換行，則需要使用\A
[注意2]若是一個很長的串，需要它拆分成多行則需要用\對換行符轉義
div:before{ content: "第一段\ 第二段"; } div:after{ content:"\A后綴"; }
【2】<uri>
div:before{ content: url("arrow.gif"); }
【3】attr(<identifier>)
div:before{ content: attr(data-before); }
<補充>【quotes屬性】
管理引號
前單引號 -> \2018 后單引號 -> \2018 前雙引號 -> \201C 后雙引號 -> \201D
quotes:'201C' '201D' '2018' '2019';//第一個值定義最外層開始引號(open-quote),第二個串定義最外層結束引號(close-quote)，第三個值定義次外層開始引號，第四個值定義次外層結束引號，第五個值定義次次外層開始引號，第六個值定義次次外層結束引號……
【4】open-quote|close-quote
<style> div{ display: inline-block; quotes: '201C' '201D' '2018' '2019' '201C' '201D'; } div:before{ content: open-quote; } div:after{ content: no-close-quote; } </style>
<div> 最外層<div> 次外層 <div> 最里層 </div> </div> </div>
【5】counter
關于counter屬性值，詳見深入理解CSS計數器
DEMO
首字下沉
<style> div{ width: 200px; border: 1px solid black; text-indent: 0.5em; } div:first-letter{ font-size: 30px; float: left; }
釘子效果
<style>
/*使用before偽元素畫圓*/ .box:before{ display:block; content:"釘子"; height: 50px; width: 50px; border-radius: 50%; background-color: black; color: white; font-weight:bold; text-align: center; line-height: 50px; } /*使用after偽元素畫三角*/ .box:after{ display: block; content: ""; width: 0; height: 0; border: 25px solid transparent; border-top: 50px solid black; margin-top: -20px; } </style>
<div class="box"></div>
圖片疊加效果
<style> body{ margin: 0; } .box{ position:relative; margin: 30px auto 0; width: 300px; } .box-img{ position: absolute; z-index:1; border: 5px solid gray; } .box:before,.box:after{ content:""; position: absolute; background-color: #D5B07C; width: 300px; height: 200px; border: 5px solid gray; } .box:before{ left: -10px; top: 0; transform: rotate(-5deg); } .box:after{ top: 4px; left: 0; transform: rotate(4deg); } </style>
<div class="box"> <img class="box-img" src="diejia.jpg" alt="圖片疊加效果"> </div>
文章列表
留言列表
