:before和::before的区别在介绍具体用法之前简单介绍下伪类和伪元素。伪类大家听的多了伪元素可能听到的不是那么频繁其实 CSS 对这两个是有区分的。有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)这是 CSS3 规范中的一部分要求目的是为了区分伪类和伪元素大多数浏览器都支持这两种表示方式。123456#id:after{...}#id::after{...}单冒号(:)用于 CSS3 伪类双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素例如 :before单冒号和双冒号的写法 ::before 作用是一样的。所以如果你的网站只需要兼容 webkit、firefox、opera 等浏览器建议对于伪元素采用双冒号的写法如果不得不兼容 IE 浏览器还是用 CSS2 的单冒号写法比较安全。更加具体的信息可以看看 MDN 对伪类和伪元素的理解。本文的主角就是伪元素 before 和 after 下面将具体讲讲这两个伪元素的魅力。哪些标签不支持伪元素补充于2016.06.28我也是才知道这个姿势。为了不误导读者就赶紧补充一下。伪元素虽然强大但是还是有一些特定的标签是不支持伪元素 before 和 after 的。诸如 img 、input、iframe这几个标签是不支持类似 img::before 这样使用。究其原因要想要标签支持伪元素需要这个元素是要可以插入内容的也就是说这个元素要是一个容器。而 inputimgiframe 等元素都不能包含其他元素所以不能通过伪元素插入内容。利用 after 清除浮动这个估计是前端都知道运用 after 伪元素清除页面浮动不做过多解释。12.clearfix:after {content:.;display:block;height:0;visibility:hidden;clear:both; }.clearfix { *zoom:1; }伪元素与 css sprites 雪碧图这个也是老姿势了。雪碧图大家应该也不陌生通过将多个图片 icon 合为一张图从而为了减少 http 请求很多网站对雪碧图的需求还是很大的。但是在制作雪碧图的过程中或者现在很多的打包工具自动生成的雪碧图都存在着需要为每个 icon 需要预留多少边距的问题。看看下图--譬如上面这种情况假设按钮中的图标是采用了雪碧图产品某天突然要求按钮从状态左变为状态右那么雪碧图原先预留的位置边距肯定就不够了导致其他图形出现在按钮中。而我们通常不会为了一个小 icon 多添加一个标签不符合语义化。所以通常这种情况需要用到雪碧图的话都是在按钮中设置一个伪元素将伪元素的高宽设置为原本 icon 的大小再利用绝对定位定位到需要的地方这样无论雪碧图每个 icon 的边距是多少都能够完美适应。单个颜色实现按钮 hover 、active 的明暗变化最近项目有个这样的需求根据不同的业务场景运营需要配置一个按钮的不同背景色值。但是我们知道一个按钮通常而言是有 3 个色值的normal 状态的hover 状态的和 active 状态的通常 hover 是比原色稍微亮一点active 则是稍微暗一点。大概是这样下图为了减轻运营同学的负担怎么样做到只配置一个背景色不配置 hover 和 active 颜色让按钮也能自适应跟随变化呢。是的用上 before、after 两个伪元素可以做到。颜色小知识这里要科普一下颜色值的小知识。我们熟知的颜色表示法除了 #fff rgb(255,255,255)还有 hsl(0, 100%, 100%)HSV。以 HSL 为例它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度英语Hue, Saturation, Lightness。对于一个使用 HSL 表示的颜色我们只需要改变 L 亮度的值就可以得到一个更亮一点或者更暗一点的颜色。当然改变亮度还可以通过叠加透明层实现这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。简单来说在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。这句话不是很严谨假设一个元素背景是纯白颜色叠加白色半透明层也是不会更亮的反之在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。所以我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2)在 .btn:hover:before 时显示用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2)在 .btn:active:before 时显示就可以做到只配置一个背景底色实现 hover 、active 的时的明暗变化。123456789101112131415161718.pesudo:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:rgba(0,0,0,.1);}.pesudo:hover:before{content:;}.pesudo:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:rgba(255,255,255,.2);}.pesudo:active:after{content:;}戳我看demo 请用 Chrome 浏览器打开。变形恢复有的时候设计师们希望通过一些比较特殊的几何图形表达不同的意思。用 CSS3 transfrom 属性我们可以轻松的得到一个梯形菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字譬如平行四边形可以表达一种速度之感。但是如上图所示内容文字也会跟着 CSS3 变换一起发生了扭曲通常我们会用一个 div 做背景进行变换而文字则是放在另外一个 div 中。但是运用伪元素我们可以去掉这些不合语义化多余的标签运用 before 伪元素将 CSS3 变换作用于伪元素上这样变形不会作用于位于 div 上的的文字而且没有使用多余的标签。戳我看demo 请用 Chrome 浏览器打开。