Larger Touch Targets in CSS Without Changing Element Size
Larger touch targets without changing element size
The old fix was adding padding that bloated the visual size. A pseudo-element expands the hit area invisibly — only on touch devices.
.button { min-width: 44px; min-height: 44px; padding: 12px 20px;}// Padding forces the visual size to grow, disrupting surrounding layout..button { position: relative;}@media (pointer: coarse) { .button::after { content: ''; position: absolute; inset: -8px; }}pointer Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
No visual impact
The ::after pseudo-element is invisible. The button looks exactly the same — only the tappable area grows.
Touch-only
@media (pointer: coarse) limits the expansion to touchscreen devices. Mouse users see no change at all.
Meets WCAG 2.5.5
WCAG Success Criterion 2.5.5 recommends at least 44×44px touch targets. Expand the hit area without reworking your layout.
How it works
The old approach adds padding or min-width/min-height to the element itself. That works, but it changes the visual size and breaks surrounding layouts.
The modern approach uses position: relative on the element and an absolutely-positioned ::after pseudo-element with inset: -8px (negative inset expands outward). Wrapped in @media (pointer: coarse), it only activates on touch devices. The hit area grows without touching the visual design.
Adjust inset to control how much the target expands. For very small elements like icon buttons, inset: -12px or more may be needed to hit the 44px WCAG target.