详解CSS伪元素的妙用单标签之美

目录

• :before和::before的区别
• 哪些标签不支持伪元素？
• 利用 after 清除浮动
• 伪元素与css sprites 雪碧图
• 单个颜色实现按钮 hover 、active 的明暗变化
• 变形恢复
• 伪元素实现换行，替代br换行标签
• 增强用户体验，使用伪元素实现增大点击热区
• more magic -- 单标签图案

:before和::before的区别

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

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

#id:after{
 ...
}
#id::after{
 ...
}

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

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

更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。

本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。

哪些标签不支持伪元素？

我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。

伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 、、