如何使用伪元素扩大按钮可点击区域

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

#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 这样使用。

究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

利用 after 清除浮动

这个估计是前端都知道，运用 after 伪元素清除页面浮动，不做过多解释。

1

2

.clearfix:after {content:"."display:blockheight:0visibility:hiddenclear:both}

.clearfix { *zoom:1}

伪元素与 css sprites 雪碧图

这个也是老姿势了。雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。

但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：

-->

譬如上面这种情况（假设按钮中的图标是采用了雪碧图），产品某天突然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距肯定就不够了，导致其他图形出现在按钮中。

而我们通常不会为了一个小 icon 多添加一个标签（不符合语义化）。

所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。

单个颜色实现按钮 hover 、active 的明暗变化

最近项目有个这样的需求，根据不同的业务场景，运营需要配置一个按钮的不同背景色值。但是我们知道，一个按钮通常而言是有 3 个色值的，normal 状态的，hover 状态的和 active 状态的，通常 hover 是比原色稍微亮一点，active 则是稍微暗一点。

1、可以为<label>元素添加生成性内容（伪元素），用其来设置单选按钮的样式。

2、把真正的单选按钮隐藏起来。

1、给label标签添加伪类

  需要注意的是，选中时使用background-clip裁剪内容时，padding会让内容撑大，故width、height要相应缩小。

2、隐藏原始按钮

3、注意让按钮和文字水平居中对齐

  因为input嵌套在label标签内，不是并行的关系了，给label添加伪类用不了input标签的checked属性。故考虑直接给input标签添加伪类来实现。

   给input标签添加伪类，那就不能用1中的方式隐藏原始的input的按钮，也不能使用display:none 以及opacity:0 等方式隐藏了，因为会直接隐藏到input的伪类的展示，可以通过设置input标签的width:0height:0 来实现。 按钮布局主要通过定位来实现，其他不变。

---