解决方案:
可以将伪元素设置为任何尺寸位置或形状甚至是脱离原来的位置
案例如下，或者参考网址 play.csssecrets.io/hit-area
原文
给a标签设置display:block后，它会根据盒模型计算a标签的实际大小。这时候，你可以使用hover伪类使a的整个盒模型生效。
.link a{display:blockpadding:2px 10px}
/*这样，a标签的范围就是文字上下各扩出2px左右各扩出10px/*
然后
.link a:hover{background:#newcolor}
就能实现你要的效果。
你所说的不要点击效果，要记住lovehate的前后顺序，以及各自代表的意义。
hover即onmouse的效果，active是点击效果。
因为padding是内边距，也就是容器内容距离容器边框的位置，增加了padding，那容器“肚子”扩大了，这个点击的范围不就变大了吗？
而如果你修改的是margin的值，margin是外边距，是自身容器与别的容器的边距，所以只是会影响当前容器的位置，更靠近或更远离。
padding控制自己扩张更大还是缩得更小。所以才会影响到自身的范围。
如果有帮助，请采纳！
