目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px
解决方案:
1. 常规的解决方案可能是设置一圈透明边框。
border: 10px solid transparent;
2. 但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用background-clip属性将背景限制在padding-box区域内。
background-clip: padding-box;
3. 如果此时想给按钮添加边框效果如阴影效果，那么只能是添加内阴影。因为外阴影会加在border-box区域外侧。
box-shadow: 0 0 0 1px rgba(0,0,0, 0.3) inset;
4. 于是终极解决办法是使用伪元素(伪元素同样可以代表其宿主元素来响应鼠标的交互)
.button{
position: relative;
}
.button::after{
content: "";
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
}
可以将伪元素设置为任何尺寸位置或形状甚至是脱离原来的位置
案例如下，或者参考网址 play.csssecrets.io/hit-area