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

每日一记 - 但并不日更

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

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

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

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

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

::before ::after

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

<!-- 在 html 中 -->
<div>
  Hello World
</div>

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

在浏览器中显示为：

❤ Hello World ❤

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

<div>
  ::after
  ' Hello World '
  ::before
</div>

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

代码大改造

改造前 改造后

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

html 代码增加了一个 class 做对比 CSS 添加了一个伪元素 可点击区域示意图

实现原理

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

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

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

JSbin

demo 源码