---
title: "Hit area larger than the visual"
description: "Use it on icon buttons, close buttons and any target that looks smaller than 44px."
canonical: https://good-css.com/hit-area-larger-than-the-visual.md
last-updated: 2026-11-05
---
# Hit area larger than the visual
Use it on icon buttons, close buttons and any target that looks smaller than 44px.
```css
.icon-button { position: relative; }
.icon-button::after {
content: "";
position: absolute;
inset: min(0px, (100% - 44px) / 2);
}
```
Why it works:
- The pseudo-element belongs to the button, so a click on it hits the button.
- The negative inset grows the area to exactly 44px. `min(0px, …)` leaves larger targets alone.
Rules:
- `overflow: hidden` or `clip` on the button cuts the area off.
- It does not work on ``, which has no pseudo-elements. Wrap it in a `