On mobile, sometimes it's necessary to provide an invisible larger area to recognize touch inputs on a crucial or otherwise difficult to activate button. This is an example of one way of doing so using pseudo elements. In this particular implementation, the buttons this was being added to would shrink while active, so a countering scaling effect…

touchZone.styl

.touchZone::after
  content ' '
  display block
  width 100%
  height 100%
  z-index 100
  top 0
  position absolute

.touchZone.active::after
.touchZone:active::after
  transform scale(1.25, 1.25)

/*
  :active::after often not always work
*/
.touchZone:focus::after
  transform scale(1.25, 1.25)

.touchZone-left::after
  left -10%
  width 110%

.touchZone-right::after
  width 110%

.touchZone-left.touchZone-right::after
  width 120%

.touchZone-top::after
  top -10%
  height 110%

.touchZone-bottom::after
  height 110%

.touchZone-top.touchZone-bottom::after
  height 120%

.touchZone-all::after
  top -10%
  left -10%
  width 120%
  height 120%

.touchZone-2x-left::after
  left -20%
  width 120%

.touchZone-2x-right::after
  width 120%

.touchZone-2x-left.touchZone-2x-right::after
  width 140%

.touchZone-2x-top::after
  top -20%
  height 120%

.touchZone-2x-bottom::after
  height 120%

.touchZone-2x-top.touchZone-2x-bottom::after
  height 120%

.touchZone-2x-all::after
  top -20%
  left -20%
  width 140%
  height 140%

Very flexible 👍