僞元素::after和::before

::after是一個CSS僞元素，使用::after，你能夠從CSS裏往頁面上新增內容(再也不要在HTML裏有相應的東西)。雖然最終生成的東西並非真正的DOM裏的內容，但這些內容能像普通內容同樣顯示，基本的效果是這樣的:css

CSS代碼

1 div::after {
2   content: "你好";
3 }

1 <div>
2   <!-- div裏的其它內容 -->
3   哈哈
4 </div>

哈哈你好web

::before跟::after徹底相似，只是它插入的內容會出如今其它內容以前。這二者的區別能夠簡單描述爲：瀏覽器

想讓插入的內容出如今其它內容前，使用::before，否者，使用::after。
在代碼順序上，::after生成的內容也比::before生成的內容靠後。若是按堆棧視角，::after生成的內容會在::before生成的內容之上。

content的值能夠爲：編碼

字符串： content: "字符串"; – 特殊字符串須要轉義或unicode編碼。
圖片：content: url(/path/to/image.jpg); – 圖片會按原尺寸大小的插入，不能改變，由於漸變色實際上也是圖像，因此，這些僞元素裏也可使用漸變色。
空： content: ""; – 能夠用於清除左右浮動元素，也可以用於使用背景圖片(這是能夠設置高和寬，甚至使用background-size。)
計數器： content: counter(li); – 在列表時計算行數很是方便。

須要注意的是，你不能用它們插入HTML(至少這些HTML代碼會被轉義輸出)。content: "<h1>nope</h1>";url

全部支持CSS3的雙冒號(::)語法的瀏覽器都會支持單冒號(:)語法，但IE8只支持單冒號。建議只使用單冒號，以得到最佳的瀏覽器支持。spa

雙冒號(::)是一種新語法，是用來將僞元素選擇器和僞元素區別開。若是不須要IE8支持，就用雙冒號(::)吧。code

都是一些小問題：blog