CSS进阶中，如何巧妙运用伪元素提升页面效果？

本文共计3088个文字，预计阅读时间需要13分钟。

最近研读《CSS SECRET》（CSS揭秘），这本著作对CSS有了更深入的理解。书中探讨了CSS3的奇妙创意，并通过Demo展示了其魅力（请用Chrome浏览器打开，非常值得一观）。书中使用单标签完成了各种图形绘制。

最近在研读《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目：

CSS3奇思妙想-- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。

也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。

正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。

:before和::before的区别

在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。

#id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。