每日一记 - 但并不日更
每个和产品撕过逼的开发都应该知道，产品除了想要 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 添加了一个伪元素
可点击区域示意图
实现原理
由于点击事件是绑定在元素上的，所以通过在内部添加伪元素的好处是，
- 伪元素使用绝对定位不会改变现有的文档流和布局尺寸
- 伪元素继承了元素的
cursor属性，鼠标指针显示与元素保持一致 - 伪元素能触发事件并冒泡给元素
所以通过这样的方式，让我们不改变现有代码，仅添加一小段代码就可以优雅地扩大点击区域了。
