css增加元素点击范围

css增加元素点击范围

有时候页面设计按钮较小，或着由于元素所在区域不适合放置大小，可以采用奇淫技巧（css）增加点击事件的触发范围。
比如页面中有一个按钮

  <text id="gl1" bindtap="{{lettering}}"></text>

css代码：

#gl1{
    text-align: center;
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    top: 50%;
    left: 22rpx;
    border-left: 4rpx solid #FFFFFF;
    border-bottom: 4rpx solid #FFFFFF;
    -webkit-transform: translate(0,-50%) rotate(-135deg);
    transform: translate(0,-50%) rotate(45deg);
}
#gl1::before{
    content:"";
    position:absolute;
    top:-20rpx;
    left:-20rpx;
    bottom:-20rpx;
    right:-20rpx;
    }

css中的伪类可以增加元素事件的触发范围，但却可以做到不影响页面元素的排列，这点是伪类的一个实用小技巧