伪元素::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