像：after，before这样的伪元素可以绑定点击事件吗

其实是可行的.伪装成就行了

首先你不能再input加before,after. 这样就没办法继续玩了

<div><input/></div>

给div绑定事件就行了

div{pointer-events:none}

div:after,div:before{pointer-event:auto}

input{pointer-event:auto}

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 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 则是稍微暗一点。

选中状态是指元素拥有输入焦点，处于选中状态的元素会有一个虚线方框，如果这个元素是个超链接，那么当按下键盘回车键就会自动打开这个链接，如果元素是可输入的控件（比如文本框），则键盘输入的字符就会出现在这个控件中。通过键盘的tab键可以在页面中各个元素间切换选中状态。而“光标移动到超链接上”是把鼠标光标移到某个超链接上，这个鼠标动作是不会改变这个元素的选中状态的，只有点击鼠标左键，这个元素才会被选中。而通常超链接点击后页面就跳转或刷新了，所以对于超链接而言，只能通过键盘来改变选中状态了。所以这是两种不同的概念。被鼠标光标指到的元素，可以是已选中的，也可以是未选中的，而且这种仅仅移动鼠标的动作不会改变元素的选中状态。

---