在互联网上闲逛时，发现了一个小技巧，现在分享给大家

优雅地扩大点击区域

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

恩可怜的开发如果撕不过，只能可怜的再把所有定位再重新计算一遍吗？ヾ(´･ ･｀｡)ノ"

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

今天这个方法学自 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 中设置伪元素来扩大点击区域，显然是最划得来的。

改造前:
<div class="demo"></div>

改造后:
<div class="demo extend"></div>

配合CSS代码：

.extend::after{
    content:'';
    position:absolute;
    top:-10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

实现原理

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

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

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