深入理解before和after

在css2中，:before和:after伪类通常结合content属性一起使用，在元素的前面或后面添加装饰性的东西，默认是行内（inline）元素。在css3中，为了区别伪元素和伪类，css3中另外定义了前面有两个冒号的::before和::after代表伪元素。那么他们之间有什么区别呢？按w3c的说法，双冒号是在css3中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。也就是说css2中就已经存在的伪类:和::都可以，但是推荐::，css3中新引入的伪类则只能用::. 最近发现在codepen.io上做demo很是方便，实时预览，还可以分享到外站，不写详细的介绍了，看demo就都知道了，下面是我在codepen.io做的demo.

这里还有一个国外大牛用before和after伪类做的纯css Macbook

另外，它们还可以用来清除浮动，是由Nicolas Gallagher 提出的一个清除浮动的优秀方案： [php] .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }[/php] 参考资料：http://designshack.net/articles/css/the-lowdown-on-before-and-after-in-css/ 补充：css-tricks有一篇文章介绍了伪类的各种应用，非常值得阅读：http://css-tricks.com/pseudo-element-roundup/