#每日一记#让我们优雅的扩大点击区域

每日一记 - 但并不日更

每个和产品撕过逼的开发都应该知道，产品除了想要 ui 把按钮设计的再大、更大、还可以大之外，就希望开发把点击区域变得大大 大一点，让用户瞎着都能点中按钮。

恩可怜的开发如果撕不过，只能可怜的再把所有定位再重新计算一遍吗？T-T

那么今天也来优雅的解决一下。

今天这个方法学自 ionic 框架中的样式，后又在《CSS 秘密花园》这本书里也有讲到，今天在此普及一下。

想要在不影响现有布局的情况下，不增加多余元素的情况下，增大点击区域，我们可以使用 CSS 中的伪元素来实现。

::before ::after

::before和::after两个伪元素，可以不用在 .html 文件中显式插入元素的情况下，增加两个dom节点。

  Hello World

/* 在 css 中 */
div::before,
div::after {
  content: '❤';
}

在浏览器中显示为：

❤ Hello World ❤

在浏览器检查器中显示为：

  ::after
  ' Hello World '
  ::before

所以我们利用这种特性，在 CSS 中设置伪元素来扩大点击区域，显然是最划得来的。

代码大改造

改造前 改造后

改造后的点击区域已经变大了一圈，整个过程没有修改原有的代码仅 css 增加了一个伪元素。

html 代码增加了一个 class 做对比

CSS 添加了一个伪元素

可点击区域示意图

实现原理

由于点击事件是绑定在元素上的，所以通过在内部添加伪元素的好处是，

1. 伪元素使用绝对定位不会改变现有的文档流和布局尺寸
2. 伪元素继承了元素的 cursor 属性，鼠标指针显示与元素保持一致
3. 伪元素能触发事件并冒泡给元素

所以通过这样的方式，让我们不改变现有代码，仅添加一小段代码就可以优雅地扩大点击区域了。

JSbin

demo 源码