css扩大元素的点击范围

QA反映有个按钮有点难点到，但是UI稿设计的宽高就这么大啊，所以只能想办法在不改变元素展示样式的情况下扩大元素的点击范围。

有两种方案都可以实现我现在的需求，它们分别是：

• border + background-clip
• 伪元素

方案一：border + background-clip

background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

.target {
    border: 20px solid transparent;
    background-clip: padding-box;
}

方案二：伪元素

不改变元素本身的大小，扩大其伪元素的大小。

.target {
    position: relative;
}

.target::after {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

总结

方案一虽然在展示效果上没有改变，但确实是改变了原始元素的大小，可能会引起一些不必要的问题。所以我更推荐方案二。