CSS / Accessibility
While auditing a search bar, small icon buttons looked fine but were frustratingly hard to tap on mobile — they were well under the WCAG recommended size. We expanded their hit areas with a single CSS rule.
The `::before { inset: -8px }` trick expands the clickable/tappable area beyond the visual element without affecting its layout or appearance.
Task
The icon button is only 20×20px. Use `::before` with `position: absolute` and a negative `inset` to expand its hit area by 12px in every direction, without changing the visual size.