移动端利用伪元素提升按钮交互体验

移动端上面的按钮如果很小，点起来很麻烦，体验将会很差，有的用户可能会有摔手机的冲动~

See the Pen GLRLEL by blwoosky (@blwoosky) on CodePen.1449

上面的 ❤ ，在手机上点击是比较考验耐心的~

所以，我们想要按钮好点的话，得适当的扩大它的触发范围，可以使用::before::after来实现：

.btn-trigger{
  position:relative;
  &::before{
    content:'';
    position:absolute;
    left:-10px;  //向左扩展10像素
    right:-10px; //向右扩展10像素
    top:-8px;    //向上扩展8像素
    bottom:-8px; //向下扩展8像素
    background:rgba(red,0.2);   //为了方便观察，加了半透明红色背景
  }
}

效果如下(实际项目中把伪元素的背景去掉即可)：

See the Pen GLRVbg by blwoosky (@blwoosky) on CodePen.1449