Back

Expanding click areas with ::before

Simple way to increase the click area of a button without changing the layout.

Try clicking near both icons to see the difference.


::before pseudo-element with position: absolute and a negative inset expands the clickable area without changing the layout.

.icon-btn {
  position: relative;
}

.icon-btn::before {
  content: '';
  position: absolute;
  inset: -14px; /* extends 14px in every direction */
}

When to use this

  • Icon-only buttons (close, copy, share, menu)
  • Nav links with dead zones between them
  • Table of contents links
  • Anything under the 24×24px minimum that WCAG recommends for touch targets