CSS：扩大可点击区域

伪元素可以代表其宿主元素来响应鼠标交互。
我们可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向上都比宿主元素大出 10px：

button {
 position: relative;
 /* [其余样式] */
}
button::before {
 content: '';
 position: absolute;
 top: -10px; right: -10px;
 bottom: -10px; left: -10px;
} 

这个基于伪元素的解决方案极为灵活，我们基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位置！

注意: 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如<img>或<br> 元素。

摘自《CSS Secrets》