An utility class .enlarge-click-area
to enlarge the click area of any elements.
Plain CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .enlarge-click-area { position: relative; } .enlarge-click-area::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 160%; height: 160%;
transform: translate(-18.75%, -18.75%); }
|
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| =enlargeClickArea($ratio: 2) position: relative
&:after $offset: percentage((1 - $ratio) / 2 / $ratio)
content: '' display: block position: absolute left: 0 top: 0 width: percentage($ratio) height: percentage($ratio) transform: translate($offset, $offset)
|